react-router-dom 6.4
推荐在web应用中使用createBrowserRouter
。它使用DOM History API来更新URL并管理历史记录堆栈。
const App = () => {
const routes = [
{
path: "/",
element: <Dashboard />,
},
{
path: "/messages",
element: <Messages />,
},
{
path: "/messages/:slug",
element: <Message />,
}
];
return <RouterProvider router={createBrowserRouter(routes)} />
};
每个路由可以定义一个加载器函数,通过
useLoaderData
向根元素提供数据以便渲染。
const AppRoutes = () => {
const routes = [
{
path: "/",
element: <Dashboard />,
loader: async () => {
return fetch(`/api/dashoard`);
},
},
{
path: "/messages",
element: <Messages />,
loader: async () => {
return fetch(`/api/messages`);
},
},
{
path: "/messages/:slug",
element: <Message />,
loader: async ({param}) => {
return fetch(`/api/messages/${param.slug}`);
},
}
];
return <RouterProvider router={createBrowserRouter(routes)} />
};
const Message = () => {
const data = useLoaderData()
return <p> {data.message} </p>
}
你可能还需要使用<Suspanse>
。它是一个内置的React组件。
<Suspense>
<RouterProvider router={createBrowserRouter(routes, { basename })} />
</Suspense>
参考资料
https://reactrouter.com/zh-cn/main/routers/create-browser-router
https://reactrouter.com/zh-cn/main/route/loader
https://reactrouter.com/zh-cn/main/hooks/use-loader-data
原始答案
版本6中没有Switch
并且已删除render
函数。
使用Routes
替代Switch
。
使用element
方法替代render
方法,它是一个React.ReactNode
类型的参数。
<Routes>
<Route path="/" element={<Dashboard />} />
<Route path="messages" element={<DashboardMessages />} />
<Route path="tasks" element={<DashboardTasks />} />
<Route path="about" element={<AboutPage />} />
</Routes>;
只有当<route.component />
是一个React.ReacNode
时,才会执行。
<Routes>
{routes.map((route, index) => {
return (
<Route key={index} path={route.path} element={<route.component />} />
);
})}
</Routes>;
Reference:
https://reactrouter.com/docs/en/v6/components/route
useLocation
中输入状态,该钩子不接受任何类型参数,那么如何在返回的对象中指定状态/搜索类型呢? - ortonomylocation
对象没有为location.state
指定类型,或者说它的类型是unknown
。当访问它时,您需要在 您的 代码中将其转换为所需的接口/类型。请参见源代码。 - Drew Reese