安装
pnpm i react-router-dom
布局
布局组件用于定义应用程序的整体布局结构,决定如何将匹配的子路由渲染到指定的位置(通过 <Outlet />
)。
file:[src/layouts/index.js]
import { Outlet, Link } from "react-router-dom";
export default function Layout() {
return (
<div>
{/* 导航栏,包含两个链接 */}
<div>
<Link to="/">关于</Link> {/* 导航到主页 */}
<Link to="/board">面板</Link> {/* 导航到面板页面 */}
</div>
{/* 渲染子路由 */}
<div>
<Outlet /> {/* 这里将会渲染匹配的子路由 */}
</div>
</div>
);
}
配置
创建了一个基于哈希的路由配置,其中包含了根路径 /
和其他路径 /login
、/article
的路由规则。根路径下使用 Layout 组件作为布局,包含了默认子路由 /about
和 /board
。其他路径分别对应不同的页面组件。最后,通过 export 将路由实例 router 和路由提供者组件 RouterProvider 导出,以便在应用中使用。
file:[src/router/index.js]
import { createHashRouter, RouterProvider } from "react-router-dom";
import Layout from "../layouts"; // 导入布局组件
import About from "../pages/About"; // 导入关于页面组件
import Board from "../pages/Board"; // 导入面板页面组件
import Login from "../pages/Login"; // 导入登录页面组件
import Article from "../pages/Article"; // 导入文章页面组件
// 创建 hash 路由
const router = createHashRouter([
{
path: "/", // 根路径
// Layout 组件作为根路由的布局
element: <Layout />, // 使用 Layout 组件
children: [
{
index: true, // 当前为根路由的默认子路由
element: <About />, // 渲染关于页面组件
},
{
path: "board", // 面板页面的路径
element: <Board />, // 渲染面板页面组件
},
],
},
{
path: "/login", // 登录页面的路径
element: <Login />, // 渲染登录页面组件
},
{
path: "/article", // 文章页面的路径
element: <Article />, // 渲染文章页面组件
},
]);
export { router, RouterProvider }; // 导出路由和 RouterProvider 组件
使用 <RouterProvider>
组件提供了路由信息给应用,并将 router 路由实例作为参数传递给了 RouterProvider 组件。
file:[src/index.js]
import React from "react";
import ReactDOM from "react-dom/client"; // 引入 ReactDOM 的 createRoot 方法
import "./index.css";
import App from "./App"; // 引入应用主组件
import reportWebVitals from "./reportWebVitals";
import { RouterProvider, router } from "./router"; // 引入路由提供者和路由实例
// 创建根容器
const root = ReactDOM.createRoot(document.getElementById("root")); // 使用 createRoot 方法创建根容器
// 渲染应用
root.render(
<React.StrictMode>
{/* 使用 RouterProvider 提供路由信息给应用 */}
<RouterProvider router={router}>
<App /> {/* 应用主组件 */}
</RouterProvider>
</React.StrictMode>
);
reportWebVitals(); // 上报 Web 性能指标
标签:router,React,RouterProvider,import,组件,Router,路由,页面
From: https://www.cnblogs.com/Himmelbleu/p/18110332