My React Router doesn't work for all routes

I am new to React. I am having a problem with my code below as only Dashboard and Register routes show up. Login shows blank page. I have tried creating other routes and they don't work either. Only routes specifically called Dashboard and Register work. Anyone has any idea where the problem is? Thanks in advance!

App.js

import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'
import Dashboard from './pages/Dashboard.jsx'
import Login from './pages/Login.jsx'
import Register from './pages/Register.jsx'
function App() { return ( <> <Router> <div className="container"> <Routes> <Route path='/' element={<Dashboard />}/> <Route path='/register' element={<Register />}/> <Route path='/login' element={<Login />}/> </Routes> </div> </Router> </> );
}
export default App;

pages/Dashboard.jsx

import React from 'react'
function Dashboard() { return ( <div>Dashboard</div> )
}
export default Dashboard

pages/Register.jsx

import React from 'react'
function Register() { return ( <div>Register</div> )
}
export default Register

pages/Login.jsx

import React from 'react'
function Login() { return ( <div>Login</div> )
}
export default Login

2 Answers

add exact in front of the path, check for more info

 function App() { return ( <> <Router> <div className="container"> <Routes> <Route exact path='/' component={<Dashboard />}/> <Route exact path='/register' component={<Register />}/> <Route exact path='/login' component={<Login />}/> </Routes> </div> </Router> </> );
}
export default App;

try to replace component by element. like this,

<Routes> <Route path="/" element={<ListEmployeeComponent></ListEmployeeComponent>} /> <Route exact path="/employees" element={<ListEmployeeComponent />} /> </Routes>