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

相关推荐
前端小巷子1 小时前
Web开发中的文件上传
前端·javascript·面试
上单带刀不带妹2 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志2 小时前
typescript结构化类型应用两例
javascript
杨进军2 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
gnip3 小时前
总结一期正则表达式
javascript·正则表达式
爱分享的程序员3 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘3 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
你这个年龄怎么睡得着的3 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
南屿im3 小时前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
Spider_Man3 小时前
从零开始构建React天气应用:API集成与UI设计全指南 🌤️
前端·react.js