React-router-dom 受保护的路由不起作用答案

【问题标题】：React-router-dom Protected Routes are not workingReact-router-dom 受保护的路由不起作用
【发布时间】：2021-12-20 00:47:30
【问题描述】：

受保护的 Routes.js：

在受保护的路由中，您可以看到我在 if 语句中直接使用 false，但我仍然能够看到该页面，为什么？

import React from 'react';
import { Route } from 'react-router-dom';
// import Auth from './User/Auth';
import Error401 from './Error/401';


// create a component for protected route


console.log('Routes.js');


export const ProtectedRoute = ({ element: Element, ...rest }) => {
    console.log("Function Called")
    return (
        <Route {...rest} render={props => {
                if(false){ 
                    return <Element {...props} />
                }else{
                    return <Error401 />
                }
            }
        } />
    )
}

App.js：这是 app.js，我在其中使用受保护的路由组件

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>
            <ProtectedRoute exact path="/register" element={<Signup/>} />
            <ProtectedRoute exact path="/login" element={<Login/>} />
            <Route path="*" element={<Error404/>} />
          </Routes>
        </Layout.Content>
        
      </Layout>
    
    </BrowserRouter>
  );
}

export default App;

【问题讨论】：

如果你的条件是false，你的if语句的else块将被执行，而不是if块。它需要if(true) 才能显示您的页面而不是错误页面
是的，但我在 else 块中使用了 error401，那么为什么它没有显示 error401。
element={<Signup/>} 应该是 element={Signup}（与 Login + Error404 相同），如果您可以创建一个代码框并在您的帖子中分享它，那么重现和调试您的问题可能会更容易。跨度>
我无法创建我的代码的代码框，因为编译时出现了一些错误，但我注意到我的代码中的另一件事是在受保护的 Routes.js 中 console.log('Routes.js'); 工作正常，但 console.log('Function Called'); 这个一个不能在控制台上工作

标签： javascript reactjs react-router-dom

【解决方案1】：

首先，<Routes> 元素应该只有 <Route> 元素作为子元素。您应该将保护逻辑下移一层。

其次，render 属性在 V6 中不再存在。它被替换为element。见doc。

以下是您可以解决的方法：

<Routes>
  <Route exact path="/register" element={(
    <ProtectedRoute>
      <Signup/>
    </ProtectedRoute>
  )} />
  <Route exact path="/login" element={(
    <ProtectedRoute>
      <Login/>
    </ProtectedRoute>
  )} />
  <Route path="*" element={<Error404/>} />
</Routes>

还有：

const ProtectedRoute = () => {
  if (condition) { return <Error401 />; } // You might as well use Navigate here

  return children;
};

【讨论】：