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

相关推荐
像风一样自由20204 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
伍哥的传说4 小时前
React 各颜色转换方法、颜色值换算工具HEX、RGB/RGBA、HSL/HSLA、HSV、CMYK
深度学习·神经网络·react.js
浪裡遊4 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
Liudef066 小时前
2048小游戏实现
javascript·css·css3
独立开阀者_FwtCoder8 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句8 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom8 小时前
JavaScript reduce()函数详解
javascript
小飞悟8 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子8 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手9 小时前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript