十、【React-Router6】Component 汇总

BrovserRouter

HashRouter

==Routes== + Route

• 6 版本中移除了 ，引入了新的替代者：

• 和 要配合使用，且必须要用 包裹

• 属性用于匹配时是否区分大小写（默认 false）

• 当 URL 变化时， 都会查看其所有子 元素找到最佳匹配项并呈现该组件

• 也可以嵌套使用，也可配合 useRoutes() 配置路由表，但需要通过 组件来渲染其子路由

• <Routes>
      /* path用于定于路径，element 用于皮质对应的组件 */
      <Route path='/about' element={ />} />
  
      /* 用于定义嵌套路由，home 是一级路由，对应路径'/home' */
      <Route path='/home' element={ />} >
      	/* test1 和 test2 是二级路由，对应路径分别是 '/home/test1' 和 '/home/test2' */
      	<Route path='/test1' element={ />} />
      	<Route path='/test2' element={ />} />
      Route>
  
      /* Route 也可以不写 element，此时就是用于展示嵌套路由，对应路径是 '/home/test' */
      <Route path='/home' >
      	<Route path='/test' element={ />} />
      Route>
  Routes>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16

Link

NavLink

• 作用和 Link 类似，多了一个导航高亮效果（默认高亮样式类名是 active，可省略不写）

• end 属性表示子路由高亮时此路由不再高亮

• 6 里移除了 activeClassName ，如果我的高亮样式类名是 peiqi，需要配置 className 为一个函数

  • 函数接收两个参数

    • isActive：是否激活
    • isPending

  • .peiqi{ background: orange; }
    
    <NavLink 
    	className={({ isActive }) => 
        	isActive ? 'list-group-item peiqi' : 'list-group-item'
    	}
        to="/about"
    >About</NavLink>
    1
    2
    3
    4
    5
    6
    7
    8

  • 路由有很多的话写着很麻烦，可以优化如下：

  • const activeClassName = ({isActive}) => 
    	isActive ? 'list-group-item peiqi' : 'list-group-item'
    
    <NavLink className={activeClassName} to="/about" >About</NavLink>
    1
    2
    3
    4

==Navigate==

• 6 版本中用 顶替了 。用于路由重定向
• 只要 组件被渲染，就会修改路径，切换视图
• replace 属性用于控制跳转模式（push 或 replace，默认是 push）

==Outlet==

• 嵌套路由中，需要使用 设置子路由的路由出口，即在何处渲染子路由
• 设置二级路由链接时，可以是 to="news"、to="./news"，但不能是 to="/news"