react如何拦截路由
拦截路由的方法
在React中拦截路由通常用于实现权限控制、数据预加载或路由跳转前的确认操作。以下是几种常见的方法：
使用React Router的导航守卫
React Router v6提供了useNavigate和useBeforeUnload等钩子来实现路由拦截：
import { useNavigate, useLocation } from 'react-router-dom';
function PrivateRoute({ children }) {
const navigate = useNavigate();
const location = useLocation();
const isAuthenticated = checkAuth(); // 自定义认证逻辑
if (!isAuthenticated) {
navigate('/login', { state: { from: location } });
return null;
}
return children;
}自定义高阶组件
创建高阶组件包装需要保护的路由：
function withAuth(Component) {
return function WrappedComponent(props) {
const isAuth = /* 认证逻辑 */;
if (!isAuth) {
return <Navigate to="/login" />;
}
return <Component {...props} />;
};
}
// 使用方式
const ProtectedPage = withAuth(PageComponent);路由配置拦截
在路由配置中直接添加拦截逻辑：
<Routes>
<Route
path="/dashboard"
element={
<RequireAuth>
<Dashboard />
</RequireAuth>
}
/>
</Routes>路由跳转确认
实现离开页面前的确认提示：
import { unstable_useBlocker as useBlocker } from 'react-router-dom';
function EditPage() {
const [isDirty, setIsDirty] = useState(false);
useBlocker(
({ nextLocation }) => isDirty &&
!window.confirm('确定要离开吗？未保存的更改将会丢失')
);
// 表单修改时设置isDirty为true
}数据预加载拦截
在路由跳转前预加载数据：
const router = createBrowserRouter([
{
path: '/',
element: <Layout />,
children: [
{
path: 'teams/:teamId',
element: <Team />,
loader: async ({ params }) => {
return fetchTeam(params.teamId); // 数据加载完成前会阻塞导航
}
}
]
}
]);每种方法适用于不同场景，可根据具体需求选择实现方式。React Router v6推荐使用loader和action来处理数据相关拦截，使用组件组合方式处理UI层拦截。
