开始
使用 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/routes
和src/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>
。