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)
  return (    
          <Route exact="/" component={Login}></Route>
          <Route exact="/" component={Welcome}></Route>
    <div className="App">
     {state.user.isValid==false ||state.user.isValid== undefined  ? <Login></Login> : <Welcome name={state.user.userName}></Welcome>} 
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