ZDecode
Snippets

React

路由拦截

点击展开代码
import ErrorPage from '@/pages/error-page.tsx'
import Root from '@/pages/root.tsx'
import { UserContext } from '@/state/user.tsx'
import { createBrowserRouter, createRoutesFromElements, Navigate, Route, RouterProvider } from 'react-router-dom'

import Login from '../pages/login.tsx'
import NotFoundPage from '../pages/not-find.tsx'
import ProtectedRoutes from './protected-routes.tsx'

function LoginWrap() {
  const { isLogin } = useContext(UserContext)
  if (isLogin) {
    return <Navigate to="/" />
  }
  return <Login />
}

function NotFoundPageWrap() {
  const { isLogin } = useContext(UserContext)
  if (!isLogin) {
    return <Login />
  }
  return <NotFoundPage />
}

export function Router() {
  const router = createBrowserRouter(createRoutesFromElements(
    <Route element={<Root />} errorElement={<ErrorPage />}>
      <Route element={<LoginWrap />} path="/login" />
      <Route element={<NotFoundPageWrap />} path="404" />
      <Route element={<ProtectedRoutes />} path="*" />
    </Route>,
  ))
  return <RouterProvider router={router} />
}
import ErrorPage from "@/pages/error-page.tsx";
import Root from "@/pages/root.tsx";
import { UserContext } from "@/state/user.tsx";
import { createBrowserRouter, createRoutesFromElements, Navigate, Route, RouterProvider } from "react-router-dom";
import Login from "../pages/login.tsx";
import NotFoundPage from "../pages/not-find.tsx";
import ProtectedRoutes from "./protected-routes.tsx";
function LoginWrap() {
	const { isLogin } = useContext(UserContext);
	if (isLogin) {
		return <Navigate to="/" />;
	}
	return <Login />;
}
function NotFoundPageWrap() {
	const { isLogin } = useContext(UserContext);
	if (!isLogin) {
		return <Login />;
	}
	return <NotFoundPage />;
}
export function Router() {
	const router = createBrowserRouter(createRoutesFromElements(<Route element={<Root />} errorElement={<ErrorPage />}>
      <Route element={<LoginWrap />} path="/login" />
      <Route element={<NotFoundPageWrap />} path="404" />
      <Route element={<ProtectedRoutes />} path="*" />
    </Route>));
	return <RouterProvider router={router} />;
}

On this page