React路由(三)

一、路由的严格匹配与模糊匹配

1、默认使用的是模糊匹配

2、开启严格匹配,添加"exact"关键字

javascript 复制代码

<Route exact path="/home" element={Home} />

3、严格匹配不要随便开启,有些时候开启会导致无法匹配二级路由

二、解决多级路径刷新页面样式丢失问题

1、public/index.html中引入样式时,不写"./",而写"/",但是在嵌套二级路由时行不通

2、public/index.htm中引入样式,改写为"%PUBLIC_URL%",比较通用的做法

3、使用标签包裹,但是不常用,路径会携带"#"

三、Redirect的使用

1、一般写在所有路由注册的最下方,当所有路由都无法匹配时,跳转到Redirect指定的路由

2、具体实现

javascript 复制代码

<Routes>
	<Route path='/home' element={Home} />
	<Route path='/about' element={About} />
	<Redirect to='/home' />
</Routes>

四、嵌套路由

1、注册子路由时要写上父路由的path值

2、路由的匹配是按照注册路由的顺序进行的

五、路由组件传参(react-router-dom 5+版本)

1、params参数

复制代码

1.1 路由链接: <Link to="/demo/test/tom/18" />
1.2 注册路由: <Route path="/demo/test/:name/:age" / elemet={Test}>
1.3 接收参数: const {name, age} = this.props.match.params

2、search参数

复制代码

2.1 路由链接: <Link to="/demo/test?name=tom&age=18" />
2.2 注册路由(无需声明,正常注册): <Route path="/demo/test" element={Test} />
2.3 接收参数: const { search } = this.props.location
2.4 **备注: 获取到的search是urlencode编码字符串,需要借助querystring/qs-js库解析**

3、state参数

复制代码

3.1 路由链接: <Link to={pathname: '/demo/test', state: {name: 'tom', age: 18}} />
3.2 注册路由: <Route path="/demo/test" element={Test} />
3.3 接收参数: this.props.location.state
3.4 **备注: 刷新页面也可以保留参数**

六、编程式路由导航

定义: 借助this.props.history对象上的API对操作路由跳转、前进、后退

javascript 复制代码

// 推送
history.push('/home')
// 替换
history.replace('/home')
// 后退
history.goBack()
// 前进
history.goForward()
// 输入负值为后退,正值为前进,0则为停留当前页面
history.go(0)

七、BrowerRouter与HashRouter的区别

1、底层原理

BrowerRouter使用的是H5的history API,不兼容IE9及以下版本;HashRouter使用的是URL的哈希值

2、URL表现形式

BrowerRouter的路径中没有"#";HashRouter中则有"#",例如: http://localhost:3000/#/demo/test

3、刷新后对路由state参数影响

BrowerRouter没有任何影响,因为state参数保存在history对象中;HashRouter刷新后导致路由state参数丢失,因为history.location对象中state会变成undefined

4、备注

HashRouter可以用于解决一些路径错误相关问题