in "react-router" directly redirects from login page to home page without signing in at sign in page in localhost

Question

I am creating a LinkedIn clone where I am adding firebase authentication on the sign-in page. I have added {props.user && <Navigate to="/home" />} where the user contains user information while signing in like name, email, etc.

But due to some reason, when I run yarn start, the sign-in page opens for a fraction of a second and then is redirected to the home page, which goes blank (only we can see the content after refreshing once)

My Login.js:

import styled from "styled-components";
import React from "react";
import { connect } from "react-redux";
import { signInAPI } from "../actions";
import { Navigate } from "react-router";

const Login = (props) => {
  return (
    <Container>
      {props.user && <Navigate to="/home" />}
      <Nav>
        //other stuff
      </Nav>
      <Section>
        //other stuff
      </Section>
    </Container>
  );
};

//styling code

const mapStateToProps = (state) => {
  return {
    user: state.userState.user,
  };
};

const mapDispatchToProps = (dispatch) => ({
  signIn: () => dispatch(signInAPI()),
});

export default connect(mapStateToProps, mapDispatchToProps)(Login);

App.js

import React, { useEffect } from "react";
import Login from "./components/Login";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./components/Home";
import Header from "./components/Header";
import { getUserAuth } from "./actions";
import { connect } from "react-redux";

function App(props) {
  useEffect(() => {
    props.getUserAuth();
  }, []); 

  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Login />}></Route>
        </Routes>
      </BrowserRouter>
      <BrowserRouter>
        <Routes>
          <Route path="/Home" element={<Home />}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

const mapStateToPorps = (state) => {
  return {};
};

const mapDispatchToProps = (dispatch) => ({
  getUserAuth: () => dispatch(getUserAuth()),
});

export default connect(mapStateToPorps, mapDispatchToProps)(App);

Yet to complete the whole project so useEffect is not final, still it works

Thought of using <Redirect /> but it doesn't work for newer versions, not even when I reinstalled node_modules, react-router-dom, react-router, it gives this error export 'Redirect' (imported as 'Redirect') was not found in 'react-router'

Answer 1

Don't use 2 routers. The router rendering Login is navigating to a route it doesn't know about so nothing will be matched and render until you reload the page and the other router can read the URL path.

Move all the routes into a single router.

function App(props) {
  useEffect(() => {
    props.getUserAuth();
  }, []); 

  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Login />} />
          <Route path="/Home" element={<Home />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

react-router-dom@6 doesn't export a Redirect component, it was replaced by the Navigate component that serves a similar function. If you want to replicate redirection then you should also pass the replace prop.

const Login = (props) => {
  return (
    <Container>
      {props.user && <Navigate to="/home" replace />}
      <Nav>
        //other stuff
      </Nav>
      <Section>
        //other stuff
      </Section>
    </Container>
  );
};

If you would like a more conventional route protection implementation then I recommend reviewing this answer regarding implementing protected routes. It decouples route protection from the actual routed content you want to display. It's separation of concerns.