React 路由篇(v5)

通过学习尚硅谷react课程React Router Dom v5篇的一些小笔记

---

写在前面:

本文的React Router的版本是5版本，根据学习尚硅谷课程整理而成

01-基本语法

Link写法

<Link to="/home">Home</Link>
<Route path='/home' component={Home}></Route>

NavLink写法

• NavLink可以实现路由链接的高亮  通过activeClassName指定样式名
• 标签体内容是一个特殊的标签属性
• 通过this.props.children可以获取标签体内容

基本写法

<NavLink activeClassName="demo" to="/home">Home</Link>
<Route path='/home' component={Home}></Route>

把NavLink封装为一个组件

// 封装成MyLink组件
<NavLink activeClassName='demo' {...this.props}  />
// 使用组件
<MyLink to='/home'>home</MyLink>

引入

        当然使用之前必须引入

import { NavLink,Link } from 'react-router-dom'

02-Switch的使用

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

无switch时，一个path会同时显示两个组件

// 此时页面会同时出现Home组件和Test组件
<Route path='/home' component={Home}></Route>
<Route path='/home' component={Test}></Route>

有switch时，path匹配到路由就不会往下继续匹配了

// 此时页面只会出现Home组件
<Switch>
    <Route path='/home' component={Home}></Route>
    <Route path='/home' component={Test}></Route>
</Switch>

03-路由的严格匹配与模糊匹配

• 默认使用的是模糊匹配
• 开启严格匹配:<Route exact={true} path='/home' component={Home}></Route>
• 严格匹配不要随便开启，需要的时候再开，有些时候会导致多级路由无法使用

// 没有开启严格匹配如下的代码也是可以实现跳转的
<NavLink to='/home/a/b'>home</NavLink>
<Route path='/home' component={Home}></Route>
// 开启严格匹配则实现不了跳转
<NavLink to='/home/a/b'>home</MyLink>
// <Route exact={true} path='/home' component={Home}></Route>
<Route exact path='/home' component={Home}></Route>

04-路由重定向

Redirect：

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

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

05-嵌套路由

        1.注册子路由时要写上父路由的path值
        2.路由的匹配是按照注册路由的顺序进行的

<NavLink to='/home/news'>News</NavLink>
<Route path='/home/news' component={News} />

06-路由参数的传递_params

1. 路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>
2. 注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>
3. 接收参数：this.props.match.params

// params携带参数
<Link to={`/home/message/detail/001/title`}>链接1</Link>
// params声明接收参数
<Route path='/home/message/detail/:id/:title' component={Detail} />
// 相关组件接收使用参数
const {id,title} = this.props.match.parmas

07-路由参数的传递_search

• 路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'}>详情</Link>
• 注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
• 接收参数：this.props.location.search
•  备注：获取到的search是urlencoded编码字符串，需要借助querystring解析
  • 在querystring内置方法:
    • qs.stringify() -- 将{name:'tom',age:18}转为name=tom&age=18
    • qs.parse()  -- 将name=tom&age=18转为{name:'tom',age:18}

// search 携带参数
<Link to={`/home/message/detail/?id=001&title=我是标题`}>链接1</Link>
// search参数无需接收 正常使用组件
<Route path='/home/message/detail' component={Detail} />
// 相关组件接收使用参数
import qs from 'querystring'  //引入querystring对参数进行格式化
const { id, title } = qs.parse(this.props.location.search.slice(1))  //获取参数

08-路由参数的传递_state

• 路由链接(携带参数)：<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
• 注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
• 接收参数：this.props.location.state
• 备注：刷新也可以保留住参数

// state 携带参数
<Link to={{pathname:'/home/message/detail/',state:{id:001,title:'我是标题'}}}>链接1</Link>
// state 参数无需接收 正常使用组件
<Route path='/home/message/detail' component={Detail} />
// 相关组件接收使用参数
const {id,title} = this.props.location.state

09-编程式路由导航

• 借助this.prosp.history对象上的API对操作路由跳转、前进、后退
  • -this.prosp.history.push()
  • -this.prosp.history.replace()
  • -this.prosp.history.goBack()
  • -this.prosp.history.goForward()
  • -this.prosp.history.go()

<button onClick={()=>this.props.history.goForward()}>前进</button>
<button onClick={()=>this.props.history.goBack()}>后退</button>
<button onClick={()=>this.props.history.go(-2)}>go</button>

10-BrowserRouter与HashRouter的区别

        1.底层原理不一样：
                    BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
                    HashRouter使用的是URL的哈希值。
        2.path表现形式不一样
                    BrowserRouter的路径中没有#,例如：localhost:3000/demo/test
                    HashRouter的路径包含#,例如：localhost:3000/#/demo/test
        3.刷新后对路由state参数的影响
                    (1).BrowserRouter没有任何影响，因为state保存在history对象中。
                    (2).HashRouter刷新后会导致路由state参数的丢失！！！
        4.备注：HashRouter可以用于解决一些路径错误相关的问题。

11-WithRouter的使用

• withRouter --- 可以加工一般组件 让一般组件具备路由组件所具有的API
• withRouter --- 返回值使一个新组件

// 在暴露一般组件时用withRouter,这样一般组件内也可以使用路由组件的API
export default withRouter(Header)

---

写在结尾

        现在react已经推出React Router v6版本了，主流市场已经向 v6 看齐了、。此文只作为 v5 的相关学习笔记，接下来大家可以去学一下v6版本了。