【React Router】路由搭建

开始

使用 Vite 创建一个新的 React 应用程序:

bash 复制代码
npm create vite@latest name-of-your-project -- --template react
# follow prompts
cd <your new project directory>
npm install react-router-dom localforage match-sorter sort-by
npm run dev

添加 Router

创建路由,使用路由。

jsx 复制代码
import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import {createBrowserRouter, RouterProvider} from "react-router-dom";
import Root, { loader as rootLoader } from "./routes/root.jsx";
import ErrorPage from "./error-page.jsx";
import Contact from "./routes/contact.jsx";

// 创建路由
const router = createBrowserRouter([
    {
        path: '/',
        // 将<Root>设置为根路由element
        element: <Root/>,
        // 将<ErrorPage>设置为根路由上的errorElement
        errorElement: <ErrorPage/>,
        // 配置 loader
        loader: rootLoader,
        // 子路由
        children: [
            {
                path: 'contacts/:contactsId',
                element: <Contact />
            }
        ]
    },
])

ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        {/* 使用路由 */}
        <RouterProvider router={router}/>
    </React.StrictMode>,
);

上面 main.jsx 中有很多路由配置,接下来会逐渐进行讲解。

根路由

创建src/routessrc/routes/root.jsx,根布局组件。并将它设置为根路由 element。

复制代码
// 将<Root>设置为根路由element
element: <Root/>,

错误页

在渲染、加载数据或执行数据突变时出现错误,React Router 就会捕获并渲染错误页面。

useRouterError 提供了抛出异常的错误信息 导航到不存在的路由时,useRouterError().statusText 得到一个"未找到"的错误响应。

所以我们要做的是制作自己的错误页 src/error-page.jsx。

jsx 复制代码
import { useRouteError } from "react-router-dom";

// 创建错误页面组件
export default function ErrorPage() {
    // useRouterError 提供了抛出异常的错误信息
    const error = useRouteError();
    console.error(error);

    return (
        <div id="error-page">
            <h1>Oops!</h1>
            <p>Sorry, an unexpected error has occurred.</p>
            <p>
                {/*导航到不存在的路由时,得到一个"未找到"的错误响应 statusText*/}
                <i>{error.statusText || error.message}</i>
            </p>
        </div>
    );
}

并设置为根路由上的 errorElement

复制代码
errorElement: <ErrorPage />

用户界面

创建用户界面 src/routes/contact.jsx 并创建路由(当然希望呈现在 Root 中那么就使用嵌套路由)。

复制代码
{ path: "contacts/:contactId", element: <Contact />, },
jsx 复制代码
// 子路由
children: [
    {
        path: 'contacts/:contactsId',
        element: <Contact />
    }
]

但这样还是不够的,我们需要让 Root 知道 children 应该展示在什么位置。使用 Outlet 来实现~

jsx 复制代码
<div id="detail">
    {/*在此处(Outlet)放置子路由*/}
    <Outlet/>
</div>

客户端路由

客户端路由允许我们的应用程序更新 URL,而无需从服务器请求另一个文档。也就是说不会对链接中的 url 进行完整文档的请求,此时需要我们使用 Link 代替 a 标签。

<a href>全部更改为<Link to>

相关推荐
Icoolkj1 天前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
^Rocky1 天前
JavaScript性能优化实战
开发语言·javascript·性能优化
西陵1 天前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
笑鸿的学习笔记1 天前
JavaScript笔记之JS 和 HTML5 的关系
javascript·笔记·html5
萌萌哒草头将军1 天前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
gnip1 天前
http缓存
前端·javascript
JohnYan1 天前
工作笔记 - 微信消息发送和处理
javascript·后端·微信
陈陈爱java1 天前
Spring八股文
开发语言·javascript·数据库
小鱼儿亮亮1 天前
canvas中画线条,线条效果比预期宽1像素且模糊问题分析及解决方案
前端·react.js
@大迁世界1 天前
用 popover=“hint“ 打造友好的 HTML 提示:一招让界面更“懂人”
开发语言·前端·javascript·css·html