How to use Memory Route In React Js ? What is exact method to use route?

  javascript, react-redux, react-router, reactjs

I have made use of react js memory router as below in my App.js –

import logo from './logo.svg';
import './App.css';
import  './Components/Login'
import Login from './Components/Login';
import {useSelector} from 'react-redux';
import { useEffect } from 'react';
import Welcome from './Components/Welcome';
import{MemoryRouter as Router, Route, Switch} from 'react-router-dom'
function App() {
  const state = useSelector(state => state.allReducers)
  console.log(state.user.isValid);
  
  return (    
      <Router>
        <Switch>
          <Route exact="/" component={Login}></Route>
          <Route exact="/" component={Welcome}></Route>
        </Switch>
    <div className="App">
     {state.user.isValid==false ||state.user.isValid== undefined  ? <Login></Login> : <Welcome name={state.user.userName}></Welcome>} 
    </div>
    </Router>
  );
}
export default App;

But this is displaying my Login component 2 times on the screen.

enter image description here

How can I avoid this?

Source: Ask Javascript Questions

LEAVE A COMMENT