React Router路由

React Router目前已经发展到 6 这个版本。因为版本的更新使用法有了一些改变。记录整理一下：

什么是React Router

React Router是一个构建在React之上的强大的路由库。可以实现URL与网页上显示的数据保持同步。

安装

npm i react-router-dom

（从5开始就放弃原有的react-router，统一改为react-router-dom）

常见的API：

BrowserRouter、Link、Routes、Route、Outlet

BrowserRouter：

在 React Router 中，最外层的 API 通常就是用 BrowserRouter。BrowserRouter 的内部实现是用了 history 这个库和 React Context 来实现的，所以当你的用户前进后退时，history 这个库会记住用户的历史记录，这样需要跳转时可以直接操作。

BrowserRouter 使用时，通常用来包住其它需要路由的组件，所以通常会需要在你的应用的最外层用它

import React from 'react'
import { BrowserRouter as Router } from 'react-router-dom'

export default function NewsSandBox() {
  return (
      <Router>
          <p>Test</p>
      </Router>
  )
}

HashRouter:

作用与BrowserRouter一样，但是HashRouter修改的是地址栏的hash值

Routes：

v6版本移除了先前的Switch，引入新的替代者：Routes

Routes 是用来包住路由访问路径(Route)的，必须和<Route>配合使用。它决定用户在浏览器中输入的路径到对应加载什么 React 组件，因此绝大多数情况下，Routes 的唯一作用是用来包住一系列的 Route.

import React from 'react'
import { BrowserRouter as Router,Routes,Route } from 'react-router-dom'

export default function NewsSandBox() {
  return (
      <Router>
          <Routes>
            <Route path="/home" element={<Home />}></Route>
            <Route path="/user-manage/list" element={<UserList />}></Route>
            <Route path="/right-manage/role/list" element={<RoleList />}></Route>
            <Route path="/right-manage/right/list" element={<RightList />}></Route>
            {/* <Route path="/" element={<Navigate to="/home" />}></Route> */}
          </Routes>
        </Router>
  )
}

Route：

Route 是定义访问路径与组件之间的关系。

重定向：

<Route path="/" element={<Navigate to="/home" />}></Route>

NavLink：

作用与<Link>组件类似，且可实现导航的“高亮”效果

//NavLink默认类名是active

<NavLink
  to="login"
  className={({ isActive }) => {
    console.log('home',isActive)
    return isActive ? 'base one' : 'base'
}}
>login</NavLink>


//NavLink加上end属性，子级路由点击时高亮，其父级路由会取消高亮
<NavLink to="home" end></NavLink>

Navigate：

作用：只要<Navigate>组件被渲染，就会修改路径，切换视图

replace属性用于控制跳转模式，（push或replace，默认是push）

<Navigate to="/about" replace={true} />

Outlet：

当<Route>产生嵌套时，渲染其对应的后续子路由