Loading... ## 路由的基本使用 - 明确好界面中的导航区、展示区 - 导航区定义Link标签 ```jsx <Link to="/xxxxx">Demo</Link> ``` - 展示区Route标签进行路径的匹配 ```jsx <Route path='/xxxx' component={Demo}/> ``` - <App>根组件的最外侧包裹了一个<BrowserRouter>或<HashRouter> - 基本组件 ```jsx <BrowserRouter /> <HashRouter /> <Route /> <Redirect /> <Link /> <NavLink /> <Switch /> ``` ## 路由组件与一般组件 - 写法不同： 1. 一般组件 ```jsx <Demo/> ``` 2. 路由组件 ```jsx <Route path="/demo" component={Demo}/> ``` - 存放位置不同： 1. 一般组件：components 2. 路由组件：pages/views - 接收到的props不同 1. 一般组件：写组件标签时传递了什么，就能收到什么 2. 路由组件：接收到三个固定的属性 ```js history: go: ƒ go(n) goBack: ƒ goBack() goForward: ƒ goForward() push: ƒ push(path, state) replace: ƒ replace(path, state) location: pathname: "/about" search: "" state: undefined match: params: {} path: "/about" url: "/about" ``` ## NavLink NavLink可以实现路由链接的点击高亮，通过activeClassName指定样式名 ## Switch的使用 - 通常情况下，path和component是一一对应的关系 - Switch可以提高路由匹配效率(单一匹配) - 其原理为当匹配到对应的路由后不再继续向下查找 ## 解决多级路径刷新页面样式丢失的问题 - public/index.html 中 引入样式时不写 ./ 写 / （常用） - public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% （常用） - 使用HashRouter ## 路由的严格匹配与模糊匹配 - 默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致） - 开启严格匹配 ```jsx // exact={true}可简写为exact <Route exact={true} path="/about" component={About} /> ``` - 严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由 ## Redirect的使用 - 一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由 - 具体编码： ```jsx <Switch> <Route path="/about" component={About}/> <Route path="/home" component={Home}/> <Redirect to="/about"/> </Switch> ``` ## 嵌套路由 - 注册子路由时要写上父路由的path值 - 路由的匹配是按照注册路由的顺序进行的 ## 向路由组件传递参数 - params参数 ```jsx // 路由链接(携带参数) <Link to='/demo/test/tom/18'}>详情</Link> // 注册路由(声明接收) <Route path="/demo/test/:name/:age" component={Test}/> // 接收参数 this.props.match.params ``` - search参数 ```jsx // 路由链接(携带参数) <Link to='/demo/test?name=tom&age=18'}>详情</Link> // 注册路由(无需声明，正常注册即可) <Route path="/demo/test" component={Test}/> // 接收参数 this.props.location.search // 备注：获取到的search是urlencoded编码字符串，需要借助querystring解析 ``` - state参数 ```jsx // 路由链接(携带参数) <Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link> // 注册路由(无需声明，正常注册即可) <Route path="/demo/test" component={Test}/> // 接收参数 this.props.location.state // 备注：刷新也可以保留住参数 ``` ## 路由懒加载 - 从 ```react``` 引入 ```lazy``` 与 ```Suspense``` 组件 ```jsx import { lazy, Suspense } from 'react' ``` - 通过 ```lazy``` 函数配合 ```import()``` 函数动态加载路由组件 ===> 路由组件代码会被分开打包 ```jsx const Login = lazy(()=>import('@/pages/Login')) ``` - 通过 ```<Suspense>``` 指定在加载得到路由打包文件前显示一个自定义 ```loading``` 界面 ```jsx <Suspense fallback={<h1>loading.....</h1>}> <Route path="/xxx" component={Xxxx}/> </Suspense> ``` ## 编程式路由导航 借助this.prosp.history对象上的API对操作路由跳转、前进、后退 ```js this.prosp.history.push() this.prosp.history.replace() this.prosp.history.goBack() this.prosp.history.goForward() this.prosp.history.go() ``` ## BrowserRouter与HashRouter的区别 - 底层原理不一样 > BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。 HashRouter使用的是URL的哈希值。 - path表现形式不一样 > BrowserRouter的路径中没有#,例如：localhost:3000/demo/test HashRouter的路径包含#,例如：localhost:3000/#/demo/test - 刷新后对路由state参数的影响 > BrowserRouter没有任何影响，因为state保存在history对象中。 HashRouter刷新后会导致路由state参数的丢失！！！ - HashRouter可以用于解决一些路径错误相关的问题。 最后修改：2022 年 12 月 07 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏