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

Question

Protected Routes.js:

In protected routes you can see I'm using directly false in if statement but I'm still able to see that page why?

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: This is app.js where I'm using protected routes component

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;

Answer 1

First, <Routes> elements should only have <Route> elements as children. You should move your protection logic down a layer.

Secondly, the render prop doesn't exist anymore in V6. It was replaced in favor of element . See doc .

Here is how you might tackle it:

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

And:

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

  return children;
};

Answer 2

you can use createContext & useContext

//store/AuthApi.jsx
import { createContext } from "react";
const AuthApi = createContext();
export default AuthApi;

Then define the context app.jsx

import React, from 'react'
import { AllRoutes } from 'routes/Routes';
import { BrowserRouter as Router } from "react-router-dom";
import AuthApi from 'store/AuthApi';
const App = () => {
  const [user, setUser] = useState(false);
  useEffect(() => {
     // you can get user from localStorage or Cookie(js-cookie npm)
     //then you can change user state true or false
  }, [])
  return (
    <>
      <AuthApi.Provider value={{ user, setUser }}>
        <Router>
          <AllRoutes />
        </Router>
      </AuthApi.Provider>
      <Toast />
    </>
  )
}

export default App

then see AllRoutes

//routes/Routes
import React, { useContext } from "react";
import { Routes, Route } from "react-router-dom";
import { SignIn, SignUp, Dashboard } from "pages";
import AuthApi from "store/AuthApi";
export const ProtectedRouting = () => {
  return (
    <Routes >
      <Route path='/' exact element={<Dashboard />} />
      // add more protected routes
    </Routes>
  )
}
export const AuthRouting = () => {
  return (
    <Routes >
      <Route exact={true} path='/sign-in' element={<SignIn />} />
      <Route exact={true} path='/sign-up' element={<SignUp />} />
    </Routes>
  )
}
export const AllRoutes = ()=> {
  const context = useContext(AuthApi);
  console.log(context.user)
  return (
      context.user ?
  <ProtectedRouting />
 : <AuthRouting />
  )
}

pages/SignIn.jsx

import React,{ useContext } from 'react';
import AuthApi from "store/AuthApi";

const SignIn = () => {
const context = useContext(AuthApi);
const signInSubmit =(e)=> {
   e.preventDefault();
   //post request to signin
   // if login is successfull then save user or token in cookie or localStorage or something
    context?.setUser(true);
  //...
}

  return (
    //signin code here
     <form onSubmit={signInSubmit}>
       ///input here
     </form>

  )
}

export default SignIn