【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。

javascript 复制代码
// 将<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

javascript 复制代码
errorElement: <ErrorPage />

用户界面

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

css 复制代码
{ 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>

相关推荐
bug_kada15 分钟前
详解 React useCallback & useMemo
前端·react.js
用户7847215099122 分钟前
Zustand源码解读(更新中)
react.js
天蓝色的鱼鱼14 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
XiaoSong18 小时前
从未有过如此丝滑的React Native开发体验:EAS开发构建完全指南
前端·react.js
用户76787977373220 小时前
后端转全栈之Next.js数据获取与缓存
react.js·next.js
小仙女喂得猪1 天前
2025 Android原生开发者角度的React/ReactNative 笔记整理
react native·react.js
艾小码1 天前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
骑自行车的码农1 天前
【React用到的一些算法】游标和栈
算法·react.js
小高0071 天前
🔍说说对React的理解?有哪些特性?
前端·javascript·react.js
江城开朗的豌豆1 天前
从生命周期到useEffect:我的React函数组件进化之旅
前端·javascript·react.js