React---路由的使用(二)

2021年09月15日 阅读数:1
这篇文章主要向大家介绍React---路由的使用(二),主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

1、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>

2、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>

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

                1.public/index.html 中 引入样式时不写 ./ 写 / (经常使用)
                2.public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% (经常使用)
                3.使用HashRouter

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

                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>

5、Redirect的使用    

                1.通常写在全部路由注册的最下方,当全部路由都没法匹配时,跳转到Redirect指定的路由
                2.具体编码:
                        
1 <Switch>
2         <Route path="/about" component={About}/>
3         <Route path="/home" component={Home}/>
4         <Redirect to="/about"/>
5 </Switch>

6、嵌套路由

      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 }

 

 

 
 

本文同步分享在 博客“半指温柔乐”(CNBlog)。
若有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一块儿分享。html