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

相关推荐
用户76787977373211 小时前
后端转全栈之Next.js SEO优化
react.js·next.js
遂心_15 小时前
深入浅出 querySelector:现代DOM选择器的终极指南
前端·javascript·react.js
遂心_15 小时前
DOM元素内容修改全攻略:从innerHTML到现代API的最佳实践
前端·javascript·react.js
YiHanXii15 小时前
React.memo 小练习题 + 参考答案
前端·javascript·react.js
知识分享小能手1 天前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
虫虫rankourin1 天前
在 create-react-app (CRA) 创建的应用中使用 react-router-dom v7以及懒加载的使用方法
前端·react.js
开心不就得了1 天前
React 状态管理
react.js·typescript
天天进步20151 天前
掌握React状态管理:Redux Toolkit vs Zustand vs Context API
linux·运维·react.js
冷冷的菜哥1 天前
react实现无缝轮播组件
前端·react.js·typescript·前端框架·无缝轮播
用户7678797737321 天前
后端转全栈之Next.js文件约定
react.js·next.js