react-router-dom 路由安装和简单使用操作

一、安装

cnpm install react-router-dom --save

二、使用

1、hashRouter和BroswerRouter

 * HashRouter：锚点链接   地址中带#
 * BrowserRouter：h5新特性，history.push   地址中不带#，带/   上线之后需要后台做重定向处理，否则会出现404

2、exact：精准匹配

默认情况下，只要路径中从前往后完整的包含每一个路由，那么这个路由对应的页面就会显示出来

如：/mine/ucenter 中包含 /mine，则地址为 http://localhost:8000/#/mine/ucenter 时，二者对应的页面都会显示出来；如果地址为 http://localhost:8000/#/mine 时，只有后者对应的页面会显示出来

3、strict：精准匹配

strict 需要和 extract 一起使用，可以使得路由匹配更加精准

默认情况下，请求地址后面添加 / 并不会影响页面请求，如图

<BrowserRouter>
  <Nav />
  <Route exact path='/' component={Home}></Route>
  <Route exact path='/mine' component={Mine}></Route>
  <Route exact path='/mine/ucenter' component={UCenter}></Route>
  <Route exact path='/demo' render={(props) => <Demo {...props} name='你好' />}></Route>
</BrowserRouter>

但是，有些时候可能会有需求：添加 / 和不添加 / 为两个不同的地址。这时，就可以使用 strict 来处理

<BrowserRouter>
  <Nav />
  <Route exact path='/' component={Home}></Route>
  <Route exact strict path='/mine' component={Mine}></Route>
  <Route exact strict path='/mine/ucenter' component={UCenter}></Route>
  <Route exact strict path='/demo' render={(props) => <Demo {...props} name='你好' />}></Route>
</BrowserRouter>

4、Link

import React from 'react';
import { Link } from 'react-router-dom'

export default function Nav() {
  return (
    <div>
        <ul>
          <li>
            <Link to='/'>Home页面</Link>
            {/* <a href='/'>Home页面</a> */}
          </li>
          <li>
            <Link to='/mine'>Mine页面</Link>
          </li>
          <li>
            <Link to='/mine/ucenter'>UCenter页面</Link>
          </li>
          <li>
            <Link to='/demo'>Demo页面</Link>
          </li>
        </ul>
    </div>
  );
}

5、路由传参

参考另一篇文章：https://blog.csdn.net/qq_41956139/article/details/106587089