React-Router V6.0 基础知识

目前react-router最新的版本为v6.16.0(2023年9月)，下面几个重要版本的发布节点，最重要的是v6.4.0：

• 2021年11月发布的v6.0.0版本，基于hooks重构，体积更小。
• 2022年9月发布的v6.4.0版本，引入createBrowserRouter/createHashRouter、 等DataAPI。
• 2023年3月发布的v6.9.0版本，引入Component、lazy等。

一、基本使用

1、安装依赖

  npm i react-router-dom

2、创建路由及引入组件

import { BrowserRouter, Routes, Route } from "react-router-dom";
import { lazy, Suspense } from "react";
const Login = lazy(() => import("@/views/login"));
const Home = lazy(() => import("@/views/home"));

function App() {
  return (
    <BrowserRouter>
      <Suspense>
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route path="/home" element={<Home />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

path：路径
element：要渲染的组件
Suspense、lazy：路由懒加载
注意：BrowserRouter组件最好放在最顶层所有组件之外，这样能确保内部组件使用 Link 做路由跳转时不出错

二、路由跳转

1、Link组件

import { Link } from "react-router-dom";
  
<Link to="foo">to foo</Link>;

2、NavLink 组件

import { NavLink } from "react-router-dom";

function Foo() {
  return (
    <NavLink style={({ isActive }) => ({ color: isActive ? "red" : "#fff" })}>
      Click here
    </NavLink>
  );
}

3、编程式跳转

import { useNavigate } from 'react-router-dom';

function Foo(){
    const navigate = useNavigate();
    return (
        // 上一个路径：/a；当前路径：/a/a1
        <div onClick={() => navigate('/b')}>跳转到/b</div>
        <div onClick={() => navigate('a11')}>跳转到/a/a1/a11</div>
        <div onClick={() => navigate('../a2')}>跳转到/a/a2</div>
        <div onClick={() => navigate(-1)}>跳转到/a</div>
    )
}

使用useNavigate钩子函数生成navigate函数，可以通过 JS 代码完成路由跳转。

三、动态路由传参

// 路由配置
function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path={'/'} element={<Login/>} />
                <Route path={'/home/:id'} element={<Home/>} />
            </Routes>
        </BrowserRouter>
    )
}

1、子路由携带

// 原页面传参
const navigate = useNavigate()
const goHome = () => {
    navigate("/home/123")
}

// 目标页面获取参数
const params = useParams()
const back = () => {
    console.log(params.id)  //打印结果为 123
}

2、问号（？）形式传参

// 原页面传参
const navigate = useNavigate()
const goHome = () => {
    navigate("/home?id=123")
}

// 目标页面获取参数
const [params] = useSearchParams()
const back = () => {
    console.log(params.getAll('id')[0])  //打印结果为 123
}

3、通过state传参

// 原页面传参
const navigate = useNavigate()
const goHome = () => {
    navigate("/home",{state:{id:123}})
}

// 目标页面获取参数
const location = useLocation()
const back = () => {
    console.log(location.state.id) //打印结果为123
}