react-router-dom(6.3.0)的使用

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情

最近项目升级版本,react路由升级到6.X版本,和之前的写法有所不同,来记录下

先上官网链接

1. 先引入所需路由和相关的页面组件

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Main from "./Main";
import Login from "./Login";
function App() {
  return (
    <BrowserRouter>
      <Routes>
      // path: 页面路径  
      // element: 渲染的页面组件
        <Route path="/main" element={<Main />} />
        <Route path="/login" element={<Login />} />
      </Routes>
    </BrowserRouter>
  );
}

2. 编程式跳转

在6.X中 使用useNavigate来进行路由的跳转

1. 参数为路由路径时,会跳转到相应的路由
2. 参数为 -1 时, 相当于后退

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

function Foo(){

let navigate = useNavigate();
    return (
        <div onClick={() => navigate('/foo')}>跳转到/foo</div>
        <div onClick={() => navigate(-1)}>返回上一级</div>
    )
}

3. 使用Link跳转

<Link>是一个元素，它允许用户通过点击它来导航到另一个视图，类似于<a>元素在 Web 应用程序中的工作方式

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

function App() {
  return (
  <div>
      <div>Welcome!</div>
      <Link to="/home">
       跳转到home
      </Link>
    </div>
  );
}

4. 嵌套路由

在App中定义嵌套路由

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Index from './pages/main/Index';
import Table from './pages/main/Table;
import Another from './pages/main/Another;
import Login from './pages/login';

function App () {
    return (
        <Routes>
        // 父Rotue包裹子组件
          <Route path="/main/*" element={<Index />}>
            <Route path="table" element={<Table />}></Route>
            <Route path="another" element={<Another />}></Route>
          </Route>
          <Route path="/login" element={<Login />}></Route>
        </Routes>
    )
}

在父组件中使用Outlet展示子组件

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

function Index () {
    return (
        <div className="content">
            // 子组件在这里展示
            <Outlet />
        </div>
    )
}

5. 全匹配路由

path为*时,可以匹配任意非空路由,优先级最低,可以用来配置错误页面

<Routes>
  <Route path="/home" element={Home}>
    <Route path="aside" element={Aside}></Route>
    // 配置错误页面
    <Route path="*" element={ErrorPage}></Route>
  </Route>
</Routes>

6. 使用state传参

传递参数

<NavLink
  to={`home`} 
  state={{ id:1, name:'Jack' }} 
>
  传递state
</NavLink>

接受参数

import React from 'react'
import { useLocation } from 'react-router-dom'

export default function Home() {
// 使用useLocation来接受参数
  const {state:{id,name}} = useLocation()
  return (
    <div>
        <span>id: {id}</span>
        <span>name: {name}</span>
    </div>
  )
}

以上是react-router-dom(6.3.0)的基本使用,想了解更详细的内容,请移步官网.