作者:流浪1种无奈 | 来源:互联网 | 2023-09-03 10:20
HashRouter包裹下访问根服务:假设为localhost:30001import{HashRouterasRouter,Route,Redirect}fromreact-router-dom;2as的作用为将HashRouter重命名为Router,这样的好处是在反复测试HashRouter和BrowserRouter
HashRouter包裹下访问根服务:假设为 localhost:3000/
1 import { HashRouter as Router, Route, Redirect } from 'react-router-dom';
2 // as的作用为将HashRouter重命名为Router,这样的好处是在反复测试HashRouter和BrowserRouter时,可以免去组件修改
3
4 import Home from './pages/Home/index';
5 import Hooks from './pages/Hooks/index';
6
7 export default function App() {
8 return (
9
10
11
12
13
14
15
16 )
17 }
操作一: 浏览器直接输入localhost:3000/
结果: 路由自动变为localhost:3000/#/home
,可正常访问.
操作二: 浏览器直接输入localhost:3000/#/hooks
结果: 可正常访问
将HashRouter更改为BrowserRouter
1 import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom'; // 使用BrowserRouter
操作一: 浏览器直接输入localhost:3000/
结果: 路由自动变为localhost:3000/home
,可正常访问
操作二: 浏览器直接输入localhost:3000/hooks
结果: 浏览器无法获得正确的结果,Cannot GET /hooks
操作二: 浏览器直接输入localhost:3000/home
结果: 浏览器无法获得正确的结果,Cannot GET /home
操作三: 浏览器直接输入localhost:3000/
成功后,点击内容Home
结果: 可成功跳转
那么问题来了:为什么HashRouter可以直接访问路径,而BrowserRouter会出现找不到路由的情况?为什么HashRouter在前端跳转就能成功?
服务器路由: browserRouter, 前端路由: hashRouter
browserRouter
如果前端使用了browserRouter
,每次改变路由时,会向服务器发送请求,因为服务器未配置对应的路径指向对应的文件,自然导致出现404的情况.(对于初始化页面,即路由为/时,不会发送请求)
因此在使用browserHistory
需要再加一层服务器配置(node/nginx),让前端发送的请求映射到对应的html文件上.
hashRouter
由于hashRouter
会在路径上添加/#/
,而/#/
后面的所有都不会发送到服务器端,即对于服务器而言,路径依旧是localhost:3000
,路由切换在前端完成。
但是官方会更推荐使用browserRouter
,貌似是因为其构建于H5的History API
,比起hashRouter
,它多出了更多的方法操控url
Link
现在,我们应用需要在各个页面间切换,如果使用锚点元素实现,在每次点击时,页面被重新加载,React Router提供了组件用来避免这种状况发生。当 你点击时,url会更新,组件会被重新渲染,但是页面不会重新加载
嗯、先看个例子
1 关于
2
3 // to为obj
4
10
11 // replace
12
13
使用to参数来描述需要定位的页面。它的值既可是字符串,也可以是location对象(包含pathname、search、hash、与state属性)如果其值为字符串,将会被转换为location对象
replace(bool):为 true 时,点击链接后将使用新地址替换掉访问历史记录里面的原地址;为 false 时,点击链接后将在原有访问历史记录的基础上添加一个新的纪录。默认为 false;
点击Link后,路由系统发生了什么?
Link 组件最终会渲染为 HTML 标签 ,它的 to、query、hash 属性会被组合在一起并渲染为 href 属性。虽然 Link 被渲染为超链接,但在内部实现上使用脚本拦截了浏览器的默认行为,然后调用了history.pushState 方法(注意,文中出现的 history 指的是通过 history 包里面的 create*History 方法创建的对象,window.history 则指定浏览器原生的 history 对象,由于有些 API 相同,不要弄混)。history 包中底层的 pushState 方法支持传入两个参数 state 和 path,在函数体内有将这两个参数传输到 createLocation 方法中,返回 location 的结构如下:
1 location = {
2 pathname, // 当前路径,即 Link 中的 to 属性
3 search, // search
4 hash, // hash
5 state, // state 对象
6 action, // location 类型,在点击 Link 时为 PUSH,浏览器前进后退时为 POP,调用 replaceState 方法时为 REPLACE
7 key, // 用于操作 sessionStorage 存取 state 对象
8 };
系统会将上述 location 对象作为参数传入到 TransitionTo 方法中,然后调用 window.location.hash 或者window.history.pushState() 修改了应用的 URL,这取决于你创建 history 对象的方式。同时会触发history.listen 中注册的事件监听器。
NavLink
是的一个特定版本,会在匹配上当前的url的时候给已经渲染的元素添加参数,组件的属性有
activeClassName(string):设置选中样式,默认值为active
activeStyle(object):当元素被选中时,为此元素添加样式
exact(bool):为true时,只有当导致和完全匹配class和style才会应用
strict(bool):为true时,在确定为位置是否与当前URL匹配时,将考虑位置pathname后的斜线
isActive(func)判断链接是否激活的额外逻辑的功能
嗯、看例子就懂了
1 // activeClassName选中时样式为selected
2 FAQs
6
7 // 选中时样式为activeStyle的样式设置
8 FAQs
15
16 // 当event id为奇数的时候,激活链接
17 const oddEvent = (match, location) => {
18 if (!match) {
19 return false
20 }
21 const eventID = parseInt(match.params.eventID)
22 return !isNaN(eventID) && eventID % 2 === 1
23 }
24
25 Event 123