react路由5版本详解

react路由5版本怎么使用呢？

先安装react路由5依赖包：

npm i react-router-dom@5 -S

然后就可以使用了。

说下简单用法吧，示例：

import { HashRouter as Router , Route, Link } from 'react-router-dom'
  
export default function App () {
  return (
    <div>
      <h1>react路由基本使用</h1>
      <Router>
        <Link to="/comment">评论</Link>
        <Link to="/search">搜索</Link>
        <Route path="/comment" component={Comment} />
        <Route path="/search" component={Search} />
        <Redirect from="/" exact to="/comment" />
        <Redirect to="/404" />
      </Router>
    </div>
  )
}
ReactDom.render(<App />, document.getElementById('root'))

以上代码基本囊括了react路由5的基本用法。

我们来总结一下：

1.最外层必须用HashRouter或BrowserRouter标签包裹套住（注意整个项目中只能有一个HashRouter或BrowserRouter标签）；

2.交互部分：<Link />或<NavLink /> （相当与vue里的router-link）

使用<Link />或<NavLink />来做链接跳转，要跳转到哪里，直接在to属性上注明，不过需要注意用<NavLink />更好一些，能够高亮显示，Link组件无法展示哪个link处于选中的效果；

注意end属性会影响高亮显示；

注意<Link />或<NavLink />只能放置于HashRouter或BrowserRouter标签之内，而不能在外；

3.路由视图部分：<Route /> （相当与vue里的router-view）

路由匹配规则：

默认路由路径匹配规则是: 模糊匹配规则

- 只要pathname以path开头就算匹配成功
- 匹配成功就加载对应组件；
- 整个匹配过程是逐一匹配，一个匹配成功了，并不会停止匹配。

要想使得一个匹配成功就停止匹配，那就用Switch包裹。

精确匹配 :exact
只有路径完全一致才被匹配上

Redirect重定向

示例写法：<Redirect from="/" exact to="/comment"/>

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

路由组件: 接收带三个固定的属性
        history:
            go: ? go(n)
            goBack: ? goBack()
            goForward: ? goForward()
            push: ? push(path, state)
            replace: ? replace(path, state)
        location: 
            pathname: "/home"
            search: ""
            state: undefined
        match:
            params: {}
            path: "/home"
            url: "/home"

路由带参跳转：（react动态路由）

首先我们要知道一个前提，路由传递的参数我们可以通过props里面的属性来获取。只要组件是被<Router>组件的<component>定义和指派的，这个组件自然就有了props的match，history和location属性。

可通过props.history.push进行编程跳转 ----> 事件点击跳转（编程式导航）
- 通过this.props.history.push跳转路由

- 可通过 props.match.params.id获取参数(对应声明式路由Route)
- 可通过 props.location.state.name获取参数(对应编程路由props.history.push)
- 可通过 props.location.search.name获取参数(对应编程路由props.history.push)
- 可通过 props.location.pathname获取路径

总的来说，传参主要是params参数、search参数、state参数这三种：

1.params参数
路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>
注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>
接收参数：this.props.match.params
2.search参数
路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'}>详情</Link>
注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
接收参数：this.props.location.search
备注：获取到的search是urlencoded编码字符串，需要借助querystring解析
3.state参数
路由链接(携带参数)：<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
接收参数：this.props.location.state
备注：刷新也可以保留住参数

 

最后，附带提一句

HashRouter和BrowserRouter的区别：

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可以用于解决一些路径错误相关的问题。

 

两种常用 Router：HashRouter 和 BrowserRouter底层都是怎么实现的呢？

- HashRouter：使用 URL 的哈希值实现
----> 监听 window 的 hashchange 事件来实现的

- BrowserRouter：使用 H5 的 history.pushState() API 实现
----> 监听 window 的 popstate 事件来实现的

好了，react路由5版本的知识点基本上就这些。编程使我快乐，欢迎互粉和留言、加群交流。