React Router 6 - 概述、基础路由、重定向、NavLink、路由表

一、概述

• React Router 以三个不同的包发布到 NPM 上，它们分别为

1. react-router：路由的核心库，提供了很多的组件、钩子

2. react-router-dom：包含 react-router 所有内容，并添加一些专门用于 DOM 的组件，例如，<BrowserRouter>等

3. react-router-native：包括 react-router 所有内容，并添加一些专门用于 ReactNative 的 API，例如，<NativeRouter> 等

• 与 React Router 5.x 版本相比，改变了什么？

1. 内置组件的变化：移除 <Switch/>、新增 <Routes/> 等

2. 语法的变化：component={About} 变为 element={<About/>} 等

3. 新增多个 hook：useParams、useNavigate、useMatch 等

---

二、基础路由

1、基本介绍

1. 6 版本中移出了先前的 <Switch>，引入了 <Routes>

2. <Route caseSensitive> 属性用于指定匹配时是否区分大小写，默认为 false

2、演示

（1）page

1. About 页面

export default function About() {
    return <h3>About Content</h3>;
}

2. Home 页面

export default function Home() {
    return <h3>Home Content</h3>;
}

（2）main

1. App 组件

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

export default function App() {
    return (
        <div>
            <div>
                <NavLink to="/about">About</NavLink>
                <NavLink to="/home">Home</NavLink>
            </div>
            <div>
                <Routes>
                    <Route path="/about" element={<About />} />
                    <Route path="/home" element={<Home />} />
                </Routes>
            </div>
        </div>
    );
}

2. main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App.tsx";

createRoot(document.getElementById("root")!).render(
    <StrictMode>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </StrictMode>,
);

---

三、重定向

1、基本介绍

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

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

2、演示

（1）page

1. About 页面

export default function About() {
    return <h3>About Content</h3>;
}

2. Home 页面

export default function Home() {
    return <h3>Home Content</h3>;
}

（2）main

1. App 组件

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

export default function App() {
    return (
        <div>
            <div>
                <NavLink to="/about">About</NavLink>
                <NavLink to="/home">Home</NavLink>
            </div>
            <div>
                <Routes>
                    <Route path="/about" element={<About />} />
                    <Route path="/home" element={<Home />} />
                    <Route path="/" element={<Navigate to="/about" />} />
                </Routes>
            </div>
        </div>
    );
}

2. main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App.tsx";

createRoot(document.getElementById("root")!).render(
    <StrictMode>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </StrictMode>,
);

---

四、NavLink

1、基本介绍

1. NavLink 用于实现"高亮"导航

2. NavLink 默认类名是 active，也可以使用自定义类名

2、演示

（1）page

1. About 页面

export default function About() {
    return <h3>About Content</h3>;
}

2. Home 页面

export default function Home() {
    return <h3>Home Content</h3>;
}

（2）main

1. App 组件

import { NavLink, Routes, Route, Navigate } from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";
import "./App.css";

export default function App() {
    function computedClassName({ isActive }) {
        return isActive ? "my-item active" : "my-item";
    }

    return (
        <div>
            <div>
                <NavLink className={computedClassName} to="/about">
                    About
                </NavLink>
                <NavLink className={computedClassName} to="/home">
                    Home
                </NavLink>
            </div>
            <div>
                <Routes>
                    <Route path="/about" element={<About />} />
                    <Route path="/home" element={<Home />} />
                    <Route path="/" element={<Navigate to="/about" />} />
                </Routes>
            </div>
        </div>
    );
}

.my-item {
    padding: 10px;
    cursor: pointer;
}

.active {
    color: red;
}

2. main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App.tsx";

createRoot(document.getElementById("root")!).render(
    <StrictMode>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </StrictMode>,
);

---

五、路由表

1、基本介绍

• useRoutes 可以根据路由表，动态创建 <Routes> 和 <Route>

2、演示

（1）page

1. About 页面

export default function About() {
    return <h3>About Content</h3>;
}

2. Home 页面

export default function Home() {
    return <h3>Home Content</h3>;
}

（2）route

• index.tsx

import About from "../pages/About";
import Home from "../pages/Home";
import { Navigate } from "react-router-dom";

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

（3）main

1. App 组件

import { NavLink, useRoutes } from "react-router-dom";
import routes from "./routes";
import "./App.css";

export default function App() {
    const element = useRoutes(routes);

    function computedClassName({ isActive }) {
        return isActive ? "my-item active" : "my-item";
    }

    return (
        <div>
            <div>
                <NavLink className={computedClassName} to="/about">
                    About
                </NavLink>
                <NavLink className={computedClassName} to="/home">
                    Home
                </NavLink>
            </div>
            <div>{element}</div>
        </div>
    );
}

.my-item {
    padding: 10px;
    cursor: pointer;
}

.active {
    color: red;
}

2. main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App.tsx";

createRoot(document.getElementById("root")!).render(
    <StrictMode>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </StrictMode>,
);