- 有两种方式可以定义路由:传递React Elements
<Home />
或传递React ComponentHome
。但是如果它们同时存在,则以React Component优先。
缺点: 通过React Component
方式定义无法传递props,可以考虑使用全局状态管理。
const elementRoutes = [{
path: '/',
element: <Home />,
errorElement: <HomeError />,
}]
const componentRoutes = [{
path: '/',
Component: Home,
ErrorBoundary: HomeError,
}]
function Home() { ... }
function HomeError() { ... }
- 新增
lazy route
模块。在路由上新增了lazy()
属性。
当用lazy={() => import("./a")}
导入时会自动识别export
的loader 、 action 、 element / Component 、 errorElement / ErrorBoundary 、 shouldRevalidate 、 handle
等函数
进行注入使用。减少了配置Route时属性的重复。
缺点: 使用lazy()
,无法使用react-router
的loader
和lazy
同时加载的功能,还是跟以前一样是瀑布流加载方式。只是提升了开发体验。
// routes配置
let routes = createRoutesFromElements(
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="a" lazy={() => import("./a")} />
<Route path="b" lazy={() => import("./b")} />
</Route>
);
// component.tsx文件
// 直接导出一个“loader”
export async function loader({ request }) {
let data = await fetchData(request);
return json(data);
}
// 直接导出一个“组件”,而不需要从它创建一个React元素
export function Component() {
let data = useLoaderData();
return (
<>
<h1>You made it!</h1>
<p>{data}</p>
</>
);
}
// 直接导出一个“ErrorBoundary”错误组件,而不需要从它创建一个React元素
export function ErrorBoundary() {
let error = useRouteError();
return isRouteErrorResponse(error) ? (
<h1>
{error.status} {error.statusText}
</h1>
) : (
<h1>{error.message || error}</h1>
);
}