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可以提高路由匹配效率(单一匹配)。

{/* 注册路由 */}
<Switch>
        <Route path="/about" component={About}/>
        <Route path="/home" component={Home}/>
        <Route path="/home" component={Test}/>
</Switch>

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

                1.public/index.html 中 引入样式时不写 ./ 写 / （常用）

                2.public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% （常用）

                3.使用HashRouter

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

                1.默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）

                2.开启严格匹配：<Route exact={true} path="/about" component={About}/>

                3.严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

<Switch>
        <Route exact path="/about" component={About}/>
        <Route exact path="/home" component={Home}/>
</Switch>

五、Redirect的使用    

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

                2.具体编码：

                        

<Switch>
        <Route path="/about" component={About}/>
        <Route path="/home" component={Home}/>
        <Redirect to="/about"/>
</Switch>

六、嵌套路由

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

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

　　　　  3.代码：

import React, { Component } from 'react'
import MyNavLink from '../../components/MyNavLink'
import {Route,Switch,Redirect} from 'react-router-dom'
import News from './News'
import Message from './Message'

export default class Home extends Component {
    render() {
        return (
                <div>
                    <h3>我是Home的内容</h3>
                    <div>
                        <ul className="nav nav-tabs">
                            <li>
                                <MyNavLink to="/home/news">News</MyNavLink>
                            </li>
                            <li>
                                <MyNavLink to="/home/message">Message</MyNavLink>
                            </li>
                        </ul>
                        {/* 注册路由 */}
                        <Switch>
                            <Route path="/home/news" component={News}/>
                            <Route path="/home/message" component={Message}/>
                            <Redirect to="/home/news"/>
                        </Switch>
                    </div>
                </div>
            )
    }
}