React-router-dom中Protected Routes保护路由无法生效问题

1. API版本不兼容 #

你使用的是react-router-dom v6版本，但你的ProtectedRoute写法是v5的旧版语法：

• v6的Route组件已经完全废弃了render、component属性，仅支持element属性传入渲染内容，你写在render回调里的权限判断逻辑完全不会执行
• 你同时给Route传入了element和自定义的render属性，v6会优先读取element的内容直接渲染，完全忽略你的权限判断逻辑，所以不管你if判断写的是什么，都会直接显示你传入的Signup/Login组件

2. 路由嵌套语法不符合v6要求 #

v6的Routes组件要求直接子元素必须是原生Route组件，不支持直接放自定义的ProtectedRoute组件作为直接子节点，你的自定义路由配置不会被v6的路由系统正确识别。

第一步：重写ProtectedRoute组件 #

v6的保护路由不需要返回Route组件，改为直接做权限判断，返回对应内容即可：

import React from 'react';
import Error401 from './Error/401';

export const ProtectedRoute = ({ children }) => {
    // 此处替换为你实际的权限判断逻辑
    const hasPermission = false;

    if (!hasPermission) {
        return <Error401 />
    }
    return children;
}

第二步：修改App.js中的路由写法 #

将ProtectedRoute作为Route的element属性的嵌套内容使用：

import './App.css';
import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import { Layout } from 'antd';
import { MoneyCollectOutlined } from '@ant-design/icons';
import Login from './Components/User/Login'; 
import Signup from './Components/User/Signup';
import {ProtectedRoute} from './Components/Routes';
import Error404 from './Components/Error/404';

function App() {
  return (
    <BrowserRouter>
      <Layout style={{minHeight:"100vh"}}>
        <Layout.Header>
          <h1 style={{color:"white"}} align="center"> <MoneyCollectOutlined/>MoneyG</h1>
        </Layout.Header>
        
        <Layout.Content style={{minHeight:"100%"}}>
          <Routes>
            <Route path="/register" element={
              <ProtectedRoute>
                <Signup/>
              </ProtectedRoute>
            } />
            <Route path="/login" element={
              <ProtectedRoute>
                <Login/>
              </ProtectedRoute>
            } />
            <Route path="*" element={<Error404/>} />
          </Routes>
        </Layout.Content>
        
      </Layout>
    </BrowserRouter>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者Mirza Hasnat