react + react-route-dom 实现路由及登录状态判断及404页面处理

import React from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
 
// 假设有一个AuthUtil工具类用于检查登录状态
const AuthUtil = {
  isLoggedIn: () => {
    // 实现登录状态检查的逻辑
    return true; // 假设用户已登录
  }
};
 
// 404页面组件
const NotFoundPage = () => (
  <div>
    <h1>404 - 页面未找到</h1>
  </div>
);
 
// 主路由组件
const MainRoutes = () => (
  <Switch>
    {/* 主页 */}
    <Route exact path="/" component={HomePage} />
    {/* 需要登录的页面 */}
    <Route path="/protected" render={() => (
      AuthUtil.isLoggedIn() ?
        (<ProtectedPage />) :
        (<Redirect to="/login" />)
    )} />
    {/* 登录页面 */}
    <Route path="/login" component={LoginPage} />
    {/* 其他页面 */}
    {/* ... */}
    {/* 404页面 */}
    <Route component={NotFoundPage} />
  </Switch>
);
 
export default MainRoutes;

这个代码实例展示了如何使用React Router DOM中的<Switch>和<Route>组件来定义应用的路由，以及如何结合一个假设的AuthUtil工具类来实现基于登录状态的路由保护。同时，展示了如何创建一个简单的404页面，并在路由表的最后加上一个<Route>来渲染404页面，以处理所有未匹配的路由。