React 私有路由未重定向到索引页面 [React-Router "5.2.0"]

Question

I've created private route for check user logged in or not. But it is not redirecting to index page if user logged in.Here is my code.

Private route:

import React from 'react'
import { useSelector } from 'react-redux';
import { Redirect } from 'react-router-dom';


const Privateroute = ({children}) => {
    const user = useSelector((state)=> state.user.value);
    console.log("Privateroute");
    console.log(user.email);
    return user.email == null ? children : <Redirect to="/auth/login" />
};

export default Privateroute;

My App.js looks like this

import React from "react";
import ReactDOM from "react-dom";
import { HashRouter as Router, Route, Switch, Redirect } from "react-router-dom";
import AdminLayout from "layouts/Admin.js";
import AuthLayout from "layouts/Auth.js";
import { store } from "./views/examples/redux/store";
import { Provider, useDispatch , useSelector  } from 'react-redux'
import Privateroute from "views/examples/Privateroute";
import {login} from './views/examples/redux/cred'



function App() {


  return (
  <Router>
    <Switch>
      <Route path="/admin" render={(props) => <AdminLayout {...props} />} />
      <Route path="/auth" render={(props) => <AuthLayout {...props} />} />
      <Privateroute> <Redirect from="/" to="/admin/index" /> </Privateroute>
    </Switch>
  </Router>
  )
}

export default App

What I am doing wrong here?

Answer 1

You dont need to write a Redirect into Private component

ref this link :https://ui.dev/react-router-v5-protected-routes-authentication

 App.js import React from "react"; import ReactDOM from "react-dom"; import { HashRouter as Router, Route, Switch, Redirect } from "react-router-dom"; import AdminLayout from "layouts/Admin.js"; import AuthLayout from "layouts/Auth.js"; import { store } from "./views/examples/redux/store"; import { Provider, useDispatch , useSelector } from 'react-redux' import Privateroute from "views/examples/Privateroute"; import {login} from './views/examples/redux/cred' function App() { return ( <Router> <Switch> <Route path="/admin" render={(props) => <AdminLayout {...props} />} /> <Route path="/auth" render={(props) => <AuthLayout {...props} />} /> <Privateroute> //your private components only here like profile etc... </Privateroute> </Switch> </Router> ) }

export default App