React路由守卫

步骤 1: 安装依赖

npm install react-router-dom

步骤 2: 创建路由配置
你可以创建一个路由配置数组，并使用懒加载功能来加载组件。以下是示例代码：

routes.js

import React, { lazy } from 'react';

// 懒加载组件
const HomeView = lazy(() => import('../view/homeView'));
const LoginView = lazy(() => import('../view/Login'));
const DashboardView = lazy(() => import('../view/Dashboard'));
const NotFoundView = lazy(() => import('../view/NotFound'));

const routes = [
    {
        path: '/',
        name: 'home',
        element: <HomeView />,
    },
    {
        path: '/login',
        name: 'login',
        element: <LoginView />,
    },
    {
        path: '/dashboard',
        name: 'dashboard',
        element: <DashboardView />,
        requiresAuth: true, // 需要身份验证
    },
    {
        path: '*',
        name: '404',
        element: <NotFoundView />,
    },
];

export default routes;

步骤 3: 创建路由守卫

使用 react-router-dom 的 Navigate 组件来实现路由守卫。你可以在 App.js 中根据是否认证来控制访问。

App.js

import React, { useState, Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import routes from './routes';

const App = () => {
    const [isAuthenticated, setIsAuthenticated] = useState(false);

    const handleLogin = () => {
        setIsAuthenticated(true);
    };

    const renderRoute = (route) => {
        if (route.requiresAuth && !isAuthenticated) {
            return <Navigate to="/login" />;
        }
        return route.element;
    };

    return (
        <Router>
            <Suspense fallback={<div>Loading...</div>}>
                <Routes>
                    {routes.map((route) => (
                        <Route key={route.path} path={route.path} element={renderRoute(route)} />
                    ))}
                </Routes>
            </Suspense>
        </Router>
    );
};

export default App;

步骤 4: 创建视图组件

你需要创建以下视图组件：homeView.js、Login.js、Dashboard.js 和 NotFound.js。

view/homeView.js

import React from 'react';

const HomeView = () => {
    return <h2>Home Page</h2>;
};

export default HomeView;

view/Login.js

import React from 'react';

const Login = ({ onLogin }) => {
    const handleLoginClick = () => {
        onLogin(); // 登录逻辑
    };

    return (
        <div>
            <h2>Login Page</h2>
            <button onClick={handleLoginClick}>Login</button>
        </div>
    );
};

export default Login;

view/Dashboard.js


import React from 'react';

const Dashboard = () => {
    return <h2>Dashboard</h2>;
};

export default Dashboard;

view/NotFound.js

import React from 'react';

const NotFound = () => {
    return <h2>404 - Page Not Found</h2>;
};

export default NotFound;

我们使用了 React.lazy 和 Suspense 来实现组件的懒加载，并在路由配置中添加了 requiresAuth 属性以标识需要身份验证的路由。通过 renderRoute 函数，我们检查用户是否已认证，如果未认证，则重定向到登录页面。