CODEWITHSUNDEEP
reactjs
Axen_Rangs
Axen_Rangs

Reputation: 427

React private route not redirecting to index page [React-Router "5.2.0"]

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?

Upvotes: 0

Views: 153

Answers (1)

Vijay
Vijay

Reputation: 319

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

Upvotes: 1

Related Questions