react-router-dom的基础使用

之前用过一点，但今天当我再次创建一个新的react项目时，我发现我并不会react-router-dom，伤心之余我重头再学一下，在此记录。另外，以下页面均无写样式，可能界面会丑一些，但不影响理解。

一、安装

npm install react-router-dom -S

二、开启路由

//main.jsx
import { BrowserRouter } from "react-router-dom"
createRoot(document.getElementById("root")).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
)

三、写自己的路由组件

四、路由链接（NavLink/Link）和注册路由(Routes、Route)

//App.jsx
import React from "react"
import { NavLink, Route, Routes } from "react-router-dom"
import About from "./pages/About.jsx"
import Home from "./pages/Home.jsx"

export default function Name() {
  return (
    <div>
      {/* 路由链接 */}
      //点击路由链接会发生路由跳转,并且会给激活的链接加一个active类名
      <NavLink to="/about">About</NavLink>
      <NavLink to="/home">Home</NavLink>
      {/* 注册路由 */}
      //对应路由的内容会展示在以下规定的区域
      //<Routes>必须写，并且首次匹配成功则不会往下继续匹配
      <Routes>
        <Route path="/about" element={<About />} />
        <Route path="/home" element={<Home />} />
      </Routes>
    </div>
  )
}

效果图：

五、重定向（Navigate）

注意：Navigate这个组件只要渲染就会跳转路径，切换视图

import React from "react"
import { NavLink, Route, Routes, Navigate } from "react-router-dom"
import About from "./pages/About.jsx"
import Home from "./pages/Home.jsx"

export default function Name() {
  return (
    <div>
      {/* 路由链接 */}
      <NavLink to="/about">About</NavLink>
      <NavLink to="/home">Home</NavLink>
      {/* 注册路由 */}
      <Routes>
        <Route path="/about" element={<About />} />
        <Route path="/home" element={<Home />} />
        <Route path="/" element={<Navigate to="/about" replace={false}/>} />
      </Routes>
    </div>
  )
}

效果图：

六、路由表

//src/router/index.jsx
import About from "@/pages/About.jsx"
import Home from "@/pages/Home.jsx"
import { Navigate } from "react-router-dom"

export default [
  {
    path: "/about",
    element: <About />,
  },
  {
    path: "/home",
    element: <Home />,
  },
  {
    path: "/",
    element: <Navigate to="/about" />,
  },
]

//App.jsx
import React from "react"
import { NavLink, useRoutes } from "react-router-dom"
import roures from "./router"

export default function Name() {
  const element = useRoutes(roures)
  return (
    <div>
      {/* 路由链接 */}
      <NavLink to="/about">About</NavLink>
      <NavLink to="/home">Home</NavLink>
      {/* 注册路由 */}
      {element}
    </div>
  )
}

七、嵌套路由

1. 新增路由组件

2. 完善路由表（children）

//router/index.js
import About from "@/pages/About.jsx"
import Home from "@/pages/Home.jsx"
import Message from "@/pages/Message"
import News from "@/pages/News"
import { Navigate } from "react-router-dom"

export default [
  {
    path: "/about",
    element: <About />,
  },
  {
    path: "/home",
    element: <Home />,
    //新增以下内容
    children: [
      {
        path: "news",
        element: <News />,
      },
      {
        path: "message",
        element: <Message />,
      },
    ],
  },
  {
    path: "/",
    element: <Navigate to="/about" />,
  },
]

3. Outlet指定路由组件呈现的位置

//Home.jsx
import React from "react"
import { NavLink, Outlet } from "react-router-dom"

export default function Home() {
  return (
    <div>
      <div>Home</div>
      <div>
        <NavLink to="message">Message</NavLink>
        <NavLink to="news">News</NavLink>
        <Outlet />
      </div>
    </div>
  )
}

效果图：

八、路由传参

1.params参数

路由链接携带参数：

路由表里接收参数：

组件里接收参数：

输出结果：

2.search参数

路由链接携带参数：

路由表中不用占位

组件里接收参数：

输出结果：

3.state参数

路由链接携带参数：

路由表中不用占位

组件里接收参数：

输出结果：

九、编程式路由导航（useNavigate）

//Home.jsx
import React from "react"
import { NavLink, Outlet, useNavigate } from "react-router-dom"

export default function Home() {
  const navigate = useNavigate()
  return (
    <div>
      <div>Home</div>
      <div>
        <div onClick={() => navigate("message")}>Message</div>
        <NavLink to="news">News</NavLink>
        <Outlet />
      </div>
    </div>
  )
}