React---路由的使用(二)
一、NavLink
NavLink可以实现路由链接的高亮，通过activeClassName指定样式名
<NavLink activeClassName="demo" className="list-group-item" to="/about">About</NavLink>
<NavLink activeClassName="demo" className="list-group-item" to="/home">Home</NavLink>二、Switch的使用
1.通常情况下，path和component是一一对应的关系。
2.Switch可以提高路由匹配效率(单一匹配)。
1 {/* 注册路由 */}
2 <Switch>
3 <Route path="/about" component={About}/>
4 <Route path="/home" component={Home}/>
5 <Route path="/home" component={Test}/>
6 </Switch>三、解决多级路径刷新页面样式丢失的问题
1.public/index.html 中 引入样式时不写 ./ 写 / （常用）
2.public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% （常用）
3.使用HashRouter
四、路由的严格匹配与模糊匹配
1.默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）
2.开启严格匹配：<Route exact={true} path="/about" component={About}/>
3.严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由
1 <Switch>
2 <Route exact path="/about" component={About}/>
3 <Route exact path="/home" component={Home}/>
4 </Switch>五、Redirect的使用
1.一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由
2.具体编码：
1 <Switch>
2 <Route path="/about" component={About}/>
3 <Route path="/home" component={Home}/>
4 <Redirect to="/about"/>
5 </Switch>六、嵌套路由
1.注册子路由时要写上父路由的path值
2.路由的匹配是按照注册路由的顺序进行的
3.代码：
1 import React, { Component } from 'react'
2 import MyNavLink from '../../components/MyNavLink'
3 import {Route,Switch,Redirect} from 'react-router-dom'
4 import News from './News'
5 import Message from './Message'
6
7 export default class Home extends Component {
8 render() {
9 return (
10 <div>
11 <h3>我是Home的内容</h3>
12 <div>
13 <ul className="nav nav-tabs">
14 <li>
15 <MyNavLink to="/home/news">News</MyNavLink>
16 </li>
17 <li>
18 <MyNavLink to="/home/message">Message</MyNavLink>
19 </li>
20 </ul>
21 {/* 注册路由 */}
22 <Switch>
23 <Route path="/home/news" component={News}/>
24 <Route path="/home/message" component={Message}/>
25 <Redirect to="/home/news"/>
26 </Switch>
27 </div>
28 </div>
29 )
30 }
31 }本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-04-25 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录