React_Route5

一、路由的基本使用

1.使用npm i react-router-dom@5 安装路由5
2.引入需要使用的组件import { Link, Route } from 'react-router-dom'
3.路由链接

{/* 在react中，靠路由链接实现切换组件---编写路由链接*/}
<Link className="list-group-item" to="/about">About</Link>     

4.注册路由

<Route path='/about' component={About} />

5.给组件最外侧包裹了一个<BrowserRouter> 或<HashRouter>

reactDom.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
    , document.getElementById('root'))

二、navLink的使用

1.引入navLinkimport { NavLink, Route } from 'react-router-dom'
2.编写路由链接

<NavLink activeClassName='content' className="list-group-item" to="/about">About</NavLink>

注： activeClassName='content'，content为自定义激活样式。
3.注册路由

<Route path='/about' component={About} />

三、封装navLink

封装一个NavLink命名为MyNavLink
1.引入NavLinkimport {NavLink} from 'react-router-dom'
2.封装MyNavLink组件

class MyNavLink extends Component {
    render() {
        return (
            // 当接收的属性很多时，用...this.props
            <NavLink activeClassName='atguigu' className="list-group-item" {...this.props} />
        );
    }
}

3.公开MyNavLink组件

export default MyNavLink;

4.在需要使用MyNavLink组件的文件引入MyNavLink组件

import MyNavLink from './components/MyNavLink'

5.使用MyNavLink组件

 <MyNavLink to='/about'>About</MyNavLink>

6.注册路由

<Route path='/about' component={About} />

四、switch的使用

Switch的使用
1.通常情况下，path和component是一一对应的关系。
2. Switch可以提高路由匹配效率(单一匹配)。

 <Switch>
    <Route path='/about' component={About} />
    <Route path='/home' component={Home} />
    <Route path='/home' component={Text} />
 </Switch>

五、解决样式丢失问题

解决多级路径刷新页面样式丢失的问题
1.public/index.html中引入样式时不写’./‘写’/’(常用)
2.public/index.html中引入样式时不写’./‘写’%PUBLIC_URL%’
3.使用HashRouter

六、精确匹配与模糊匹配

1.默认使用的是模糊匹配(简单记: [输入的路径]必须包含要[匹配的路径]，且顺序要-致)
2.开启严格匹配: <Route exact={true} path=" /about" component={About}/>
3.严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

使用精确匹配exact=true

<Route exact path='/about' component={About} />

七、Redirect的使用

 1.一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由
 2.具体编码：
     <Switch>
         <Route exact path='/about' component={About} />
         <Route exact path='/home' component={Home} />
         <Redirect to='/home'/>
     </Switch>

八、嵌套路由的使用

嵌套路由
     1.注册子路由时要写上父路由的path值
     2.路由的匹配是按照注册路由的顺序进行的(从APP中进行匹配)

代码：

<Route path="/home/news"component={News} />

九、组件传参

1.params参数
（1）路由链接（携带参数）

<Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link> 

（2）注册路由（声明接收）

<Route path='/home/message/detail/:id/:title' component={Detail}></Route>

（3）接收参数

const { id, title } = this.props.match.params

2.search参数
（1）路由链接（携带参数）

<Link to={`/home/message/detail/?name=tom&age=18`}>详情</Link>

（2）注册路由（无需声明，正常注册即可）

<Route path='/home/message/detail' component={Detail}></Route>

（3）接收参数

const { search } = this.props.location

3.state参数
（1）路由链接（携带参数）

<Link 
	to={{pathname: "/home/message/detail",
		 state: { id: msgObj.id, title: msgObj.title }}}
>
	{msgObj.title}
</Link>

（2）注册路由（无需声明，正常注册即可）

<Route path="/home/message/detail" component={Detail} />

（3）接收参数

const {id,title}=this.props.location.state || {}

十、push模式

默认模式，可以记录浏览记录，回退到上一次操作页面记录
1.携带params参数

this.props.history.push(`/home/message/detail/${id}/${title}`)

2.携带search参数

this.props.history.push(`/home/message/detail/?id=${id}&title=${title}`)

3.携带state参数

this.props.history.push(`/home/message/detail`,{id:id,title:title})

十一、replace模式

会替换掉当前路由，回不到上一级路由
1.携带params参数

this.props.history.replace(`/home/message/detail/${id}/${title}`)

2.携带search参数

this.props.history.replace(`/home/message/detail/?id=${id}&title=${title}`)

3.携带state参数

this.props.history.replace(`/home/message/detail`,{id:id,title:title})

十二、withRouter的使用

withRouter可以加工一般组件，让一般组件具备路由组件所特有的API
withRouter的返回值是一个新组件

使用：export default withRouter(Header)

一般组件与路由组件

1.写法不同:
   一般组件: <Demo/>
    路由组件: <Route path="/demo" component={Demo}/>

2.存放位置不同:
    一般组件:components
    路由组件: pages

3.接收到的props不同:
    一般组件:写组件标签时传递了什么，就能收到什么

    路由组件:接收到三个固定的属性
        history:
            go: f go(n)
            goBack: f goBack()
            goForward: f goForward( )
            push: f push(path, state)
            replace: f replace(path, state)

        location :
            pathname: " /about'
            search:
            state: undefined

        match :
            params: {}
            path: "/about"
            url: "/about"