After adding router in App.js in react nothing is displayed in the webpage - node.js

Question

After using the BrowserRouter as a wrapper function nothing is displayed on the webpage.
App.js
import React, { Component } from 'react';
import './App.css';
import Homepage from './components/homepage/homepage';
import Login from './components/login/login';
import Register from './components/register/register';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
function App() {
return (
// <div className="App">
<Router>
<div className="App">
<ul >
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/login">Login</Link>
</li>
<li>
<Link to="/register">Register</Link>
</li>
</ul>
<Routes>
<Route exact path='/' element={< Homepage />}></Route>
<Route exact path='/login' element={< Login />}></Route>
<Route exact path='/register' element={< Register />}></Route>
</Routes>
</div>
</Router>
// </div>
);
}
export default App;
homepage.js
import React from "react"
import "./homepg.css"
const Homepage = () => {
return (
<div className="homepage">
<h1>Hello Homepage</h1>
<div className="button">Logout</div>
</div>
)
}
export default Homepage
login.js
import React, {useState} from "react"
import "./login.css"
import axios from "axios"
const Login = () => {
const [ user, setUser ] = useState({
email : "",
password : ""
})
const handleChange = e => {
const {name , value} = e.target
setUser({
...user,
[name] : value
})
}
const login = () => {
axios.post("http://localhost:9002/login",user)
.then(res => alert(res.data.message))
}
return (
<div className="login">
{console.log("User",user)}
<h1>Login</h1>
<input type="text" name="email" value={user.email} placeholder="Enter email" onChange={handleChange}></input>
<input type="password" name="password" value={user.password} placeholder="Enter password" onChange={handleChange}></input>
<div className="button" onClick={login}>Login</div>
<div>or</div>
<div className="button">Register</div>
</div>
)
}
export default Login
register.js
import React, {useState} from "react"
import "./register.css"
import axios from "axios"
const Register = () => {
const [ user, setUser ] = useState({
name: "",
email : "",
password : "",
reEnterPassword : ""
})
const handleChange = e => {
const {name , value} = e.target
setUser({
...user,
[name] : value
})
}
const register = () =>{
const {name,email,password, reEnterPassword} = user
if(name && email && password && (password === reEnterPassword)){
axios.post("http://localhost:9002/register", user)
// console.log("yo")
.then(res => console.log(res))
}
else{
alert("Invalid input")
}
}
return (
<div className="register">
{console.log("User",user)}
<h1>Register</h1>
<input type="text" name="name" value={user.name} placeholder="Your Name" onChange={handleChange}></input>
<input type="text" name="email" value={user.email} placeholder="Your Email" onChange={handleChange}></input>
<input type="password" name="password" value={user.password} placeholder="Your password" onChange={handleChange}></input>
<input type="password" name="reEnterPassword" value={user.reEnterPassword} placeholder="Re-enter password" onChange={handleChange}></input>
<div className="button" onClick={register}>Register</div>
<div>or</div>
<div className="button">Login</div>
</div>
)
}
export default Register
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App />,
);
If only <Homepage />, <Login/>, and <Register /> are present then homepage, login, and register page gets displayed.
But once I use the Router from react-router-dom then the webpage is blank, nothing is displayed.

Answer 1

There are several reasons why your components are not being displayed when using the BrowserRouter component from the react-router-dom library. Some of the most common reasons include:
1. Incorrect Router Import: Make sure you have imported the BrowserRouter component correctly from the react-router-dom library. The correct import statement is: import { BrowserRouter } from 'react-router-dom'.
2. Wrapping the Wrong Components: Make sure that you are wrapping the correct components inside the BrowserRouter. The BrowserRouter should wrap all the components that need access to the routing functionality.
3. Incorrect Route Configuration: Make sure you have correctly set up your routes using the Route component. The Route component should be used to define the mapping between a path and a component.
4. Components not Exporting Correctly: Make sure that your components are being exported correctly. Each component should be exported using export default ComponentName.
If you provide more information about your code and the error message that you're encountering, I'd be happy to help you further.