乐趣区

关于react.js:React-Router-基本使用与常见问题解决方案

jiezi

引入路由 Router

想起以前上网的时候，网速慢，每次点击一个链接跳转须要期待页面刷新一段时间，当初曾经很少见这种了。前端引入路由之后，不须要页面刷新也能通过导航或者链接来刷新页面内容。
咱们晓得 React 所有皆组件，个别的那些数据无需从新渲染的组件们，都被叫做个别组件，个别放在 components 文件夹，而路由组件有所不同，个别寄存在另外的 pages 文件夹里。
对于一个须要路由的界面，咱们能够把界面分成 导航区 和展示区，当咱们点击导航区的不同标签时，展示区就会展现不同的内容。

路由的根本应用

先装置路由，老样子，有的 node 的环境下，在终端中输出 yarn add react-router-dom, 即可装置 router，没有yarn 能够用 npm。
在HTML中，要实现页面跳转，通常是须要用到 a 标签来实现页面跳转，或者通过 js 来勾销默认跳转操作而后操作 DOM 来实现路由性能。有了 react-router 之后，咱们能够在 导航区 用Link或者 NavLink 标签来代替 a 标签，在展示区写 Route 标签进行门路的调配，并在最内部包裹一对 Router 标签（BrowserRouter/ HashRouter)，这样就设置好了路由，代码如下。

// 导航区
<Link to="/xxx">Demo</Link>
// 展示区
<Route path="/xxx" component={Demo}/>

其中 to 和path须要统一能力进行路由跳转，路径名能够本人设置。component中是曾经裸露的路由组件，须要在以后的 jsx 文件中引入路由组件。

路由组件和个别组件的区别

  1. 写法不同
    个别组件：<Demo/>
    路由组件：<Route path="/demo" component={Demo}/>
  2. 寄存地位不同
    个别组件：components
    路由组件：pages
  3. 接管到的 props 不同
    个别组件：写组件标签时传递什么就收到什么
    路由组件：接管到三个固定属性，history，location，match。

NavLink 和 Link 的区别

NavLink能够实现路由链接的高亮，通过 activeClassName 指定款式名，也能够通过封装自定义 NavLink，封装的组件放在components 中

Switch 的应用

通常状况下咱们不心愿一个 path 对应多个 component，这样会导致多个component 同时渲染到页面上，所以会引入 react-router-dom 中的 Switch，包裹在Route 组外，以失去一一对应的路由，进步匹配效率

解决多级门路刷新页面款式失落的问题

  1. 在 public/index.html 中，引入款式式不写 ./ 而是/
  2. 在 public/index.html 中，引入款式式不写 ./ 而是 %PUBLIC_URL%
  3. 应用 HashRouter
    前两个办法比拟罕用，而 HashRouter 用的比拟少

严格匹配和含糊匹配

默认应用的是含糊匹配，也就是说，只有第一级门路能匹配，即便前面的所有门路都不匹配也没关系，不会报错，展现这个匹配的组件。开启严格匹配须要给 Route 组件增加一个属性exact={true}。严格匹配不要轻易开启，有时候开启会导致无奈持续匹配二级路由

Redirect

默认跳转，在所有路由无奈匹配的时候，跳转的 Redirect 指定的路由，须要从 react-router-dom 中引入，编码实例如下：

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

向路由组件传递参数的三种形式

params参数
search 参数
state 参数

BrowserRouter 和 HashRouter 的区别

  1. 底层原理不同
    BrowserRouter 用 的是 H5 的 history 中的 API，兼容性绝对要差一些
    HashRouter 用的是 URL 的哈希值
  2. URL 表现形式不一样
    BrowserRouter 的门路中没有#，HashRouter 中有
  3. 刷新后对 state 参数的影响
    BR 无影响
    HR 刷新会导致 state 参数的失落
退出移动版