弑
弑君者
V1
2022/12/14阅读:25主题:默认主题
这还是我们认识的react-router吗?
捕获路由出错
比如当某个路由下发生错误的时候,可以捕获路由错误 可以捕获路由错误,通过errorElement获取捕获错误 比如 可以使用useRouteError获取到发生的错误
import { useRouteError } from "react-router-dom";
export default function ErrorPage() {
const error = useRouteError();
console.error(error);
return (
<div id="error-page">
<h1>Oops!</h1>
<p>Sorry, an unexpected error has occurred.</p>
<p>
<i>{error.statusText || error.message}</i>
</p>
</div>
);
}
路由出错也会有冒泡性,也就是如果在子路由出错,如果子路由没有设置errorElement,就会冒泡到父路由上。
如何设置路由渲染到指定的区域
可以使用react-router-dom 提供的Outlet
// import React from "react";
import { Outlet } from "react-router-dom";
<div id="detail">
<Outlet />
</div>
然后配置路由如下:
const router = createBrowserRouter([
{
path: "/",
element: <Root/>,
errorElement: <ErrorPage />,
children: [
{
// 这里的路由就会渲染到Outlet里边
path: "contacts/:contactId",
element: <Contact />,
},
],
},
]);
切换路由的时候,加载数据
使用loader和useLoaderData 这两个api来实现
使用loader 加载数据;
使用useLoaderData在组件中获取到加载过来的数据;
但是感觉这个没什么实际落地场景
然后再结合action,同步loader里边的数据。
感觉没什么用处,不是使用redux 管理状态吗? 怎么react-router-dom这里也要插一脚,完全没搞懂😭
获取路由url的参数
[
{
path: "contacts/:contactId",
element: <Contact />,
},
];
比如像这里的:contactId,在loader里边获取的方式就是通过使用
export async function loader({ params }) {
return getContact(params.contactId);
}
这里可以看到contactId直接通过params穿到了loader函数里边
使用NavLink来展示当前所在的路由
使用NavLink可以获取当前路由是否是active的,比如如下代码,通过传入的isActive和isPending判断当前是否是active的状态
<NavLink
to={`contacts/${contact.id}`}
className={({ isActive, isPending }) =>
isActive ? "active" : isPending ? "pending" : ""
}
>
路由跳转添加loading 效果
可以使用useNavigation,获取到当前的路由状态,是否是loading状态,比如 在Outlet外边添加loading状态
const navigation = useNavigation();
<div
id="detail"
className={
navigation.state === "loading" ? "loading" : ""
}
>
<Outlet />
</div>
作者介绍
弑
弑君者
V1