代码: https://github.com/JanYLee/recruit-app/tree/demo/router-basic

官网: https://reacttraining.com/react-router/
安装: npm install react-router-dom

入门组件

  • BrowserRouter 包裹整个应用
  • Router 路由对应渲染的组件, 可以嵌套
  • Link 跳转专用

改写index.js文件, 加入路由

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { createStore, applyMiddleware, compose } from 'redux';
  4. import thunk from 'redux-thunk';
  5. import { Provider } from 'react-redux';
  6. import { BrowserRouter, Route, Link } from 'react-router-dom';
  8. import { counter } from './index.redux';
  10. import App from './App.jsx';
  12. const reduxDevTools = window.devToolsExtension
  13.   ? window.devToolsExtension()
  14.   : f => f;
  15. // 新建store
  16. const store = createStore(
  17.   counter,
  18.   compose(
  19.     applyMiddleware(thunk),
  20.     reduxDevTools
  21.   )
  22. );
  24. function Secend () {
  25.   return <h2>第二个组件</h2>
  26. }
  28. function Third () {
  29.   return <h2>第三个组件</h2>
  30. }
  32. ReactDOM.render(
  33.   <Provider store={store}>
  34.     <BrowserRouter>
  35.       <div>
  36.         <ul>
  37.           <li>
  38.             <Link to='/'>root</Link>
  39.           </li>
  40.           <li>
  41.             <Link to='/second'>二组件</Link>
  42.           </li>
  43.           <li>
  44.             <Link to='/third'>三组件</Link>
  45.           </li>
  46.         </ul>
  47.         <Route path='/' exact component={App}></Route>
  48.         <Route path='/second' component={Secend}></Route>
  49.         <Route path='/third' component={Third}></Route>
  50.       </div>
  51.     </BrowserRouter>
  52.   </Provider>,
  53.   document.getElementById('root')
  54. );

<Route path='/' exact component={App}></Route> 中的exact表示完全匹配, 不写的话点击第二,第三组件的时候App组件也会显示, 这其实就是一种匹配关系;

现在的效果:
test.gif

其他组件

  • 获取路由参数

被路由包裹的组件会被传入一些参数信息, 写个测试组件, 并打印测试组件的props:
image.png
切换路由时, 打印如下:
image.png

在匹配的路由后加上:即可获取当前路由的信息, 如:
image.png
通过 props.match.params.location 获取到;
也可以使用useParams的api
image.png

Switch

Switch组件只渲染匹配中的第一个组件
image.png
这样子写的话点击第二第三组件时, Test组件才不会显示, 然后如果是其他随意的路由, 则会显示Test组件

Redirect

重定向组件
下面的写法可以重定向到第二个组件
image.png