案例代码

  1. import React from 'react';
  3. import { BrowserRouter,Link, Route } from 'react-router-dom'
  4. import Home from './pages/Home'
  5. import About from './pages/About'
  6. function App() {
  7.   return (
  8.     <BrowserRouter>
  9.       {/* 导航区 */}
  10.       <ul>
  11.         {/* 原生html中，靠<a>标签进行页面跳转 */}
  12.         {/* <li><a href="./home.html">Home</a></li> */}
  13.         {/* <li><a href="./about.html">About</a></li> */}
  15.         {/* 在React中靠路由链接实现切换组件 */}
  16.         <li> <Link to="/home">Home</Link> </li>
  17.         <li> <Link to="/about">About</Link> </li>
  18.       </ul>
  20.       {/* 路径渲染区 */}
  21.       <div>
  22.         <Route path="/home" component={Home}></Route>
  23.         <Route path="/about" component={About}></Route>
  24.       </div>
  25.     </BrowserRouter>
  26.   );
  27. }
  29. export default App;

代码解析

Link

  1. <Link to="/home">Home</Link>

路由导航，实现点击时 ulr显示为 http://localhost:3000/home
⚠️注意：/后面的路径小写因为不识别大小写

路由的动态传参

使用Link组件的 to属性：可以传对象或者字符串
image.png
image.png

Route 注册路由

类似Vue中的router-view

  1. <Route path="/home" component={Home}></Route>

路由匹配器，实现url变为 http://localhost:3000/home 时显示 component 属性中的组件

404处理：

404页面通常配置在最下面， 标签中 path 属性为’*’，也可以不写 path 属性，表示全部匹配
image.png

image.png

总结：

  1. 明确好界面中的导航区、展示区
  2. 导航区的a标签改为Link标签

DemoTitle

  1. 展示区写Router标签进行路径匹配

  1. 的最外侧包裹一个 或者

路由组件vs一般组件

不同：
  1. 存放位置不同

image.png

  1. 展现形式不同

一般组件


路由组件

  1. 最大区别 收到的props不同

路由组件会收到路由器传递的3个固定的props信息
image.png
image.png
image.png

NavLink

Link替换成NavLink
NavLink可以通过自带属性activeClassName来控制激活样式

  1. <NavLink to="/about">About</NavLink>

被点击后会自动添加class属性为active
image.png

  1. <NavLink activeClassName="A" to="/about">About</NavLink>

添加了 activeClassName 属性 被点击后会添加属性后的value作为类名
image.png

Switch

  1. 通常情况下，path和component是一一对应的关系，一次只渲染一个
  2. Switch可以提高路由匹配的效率( 单一匹配 )

用法：放在路由组件外面包裹住路由组件
image.png

路由的严格匹配和模糊匹配

  1. 默认使用的是模糊匹配(【输入的路径】必须包含要【匹配的路径】，且顺序一直 )
  2. 开启严格匹配：
  3. 严格匹配不要随意开启，需要在开，有些时候开启会导致无法继续匹配二级路由

Redirect

渲染 将使导航到一个新的地址。这个新的地址会覆盖 history 栈中的当前地址，类似服务器端（HTTP 3xx）的重定向。

  1. 一般写在所有路由注册的最下方，当前所有路由都无法匹配时，跳转到Redirect指定的路由。
    1. <div>
    2. <Route path="/home" component={Home}></Route>
    3. <Route path="/about" component={About}></Route>
    4. <Redirect to="/home"></Redirect>
    5. </div>
    页面打开ulr就是 http://localhost:3000/home
    Redirect 重定向组件 有3个属性：from：当前路由路径、to：模板路由路径、exact：路径完全匹配
    1. <div>
    2.  <h1>RouteComp</h1>
    3.  <Suspense fallback={<div>页面切换中。。。</div>}>
    4.      <Switch>
    5.          <Redirect from='/' to="/home" exact/>
    6.          {routes.slice(0, -1).map((item, index) =>
    7.              <Route key={index} path={item.path} component={item.Component} />)}
    8.      </Switch>
    9.  </Suspense>
    10. </div>
    二级路由重定向：
    1. <Redirect from='/home' to="/home/hot" exact/>

命令式跳转 【编程式导航】

useHistory().push(ulr)

  1. // 从react-router-dom中导出useHistory函数
  2. import {useHistory} from 'react-router-dom'
  3. export default function Tab() {
  4.   console.log(useHistory()) 
  5.   const history=useHistory()
  6.   return(
  7.     ...
  8.     <button onClick={()=>{history.push('/mine')}}>路径变为/mine</button>
  9.   )
  10. }

Line3输出的是：
image.png
实现点击按钮路径变为 http://localhost:3000/mine

useHistory().replace(ulr)

方法不会把跳转操作放入浏览器历史记录

  1. import {useHistory} from 'react-router-dom'
  2. export default function Tab() {
  3.   console.log(useHistory()===props.history) //true
  4.   const history =useHistory()
  5.     console.log('props',props.history)
  6.     console.log('useHistory',history)
  7.     console.log(history==props) // false
  8.   return(
  9.     ...
  10.     <button onClick={()=>{history.push('/mine')}}>路径变为/mine</button>
  11.         <button onClick={()=>{props.history.goBack()}}>返回</button>
  12.   )
  13. }

声明式跳转

react-router-dom提供来Link 和 NavLink 以及html中的a标签