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

Posted 2023-02-19

【中文标题】React-router-dom 受保护的路由不起作用

【英文标题】：React-router-dom Protected Routes are not working

【发布时间】：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'); 这个一个不能在控制台上工作

【参考方案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;
;