Web page not displaying in the browser using React Router Dom 6

React
1

Good day

I created a routes in my App.js in order to facilitate navigation, when i ran the build it shows success in the console but not displaying in the browser. see the code below

import { useContext } from "react";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Navigate,
} from "react-router-dom";
import { UserContext } from "./context/UserContext";
import Login from "./components/Login";
import Register from "./components/Register";
import Home from "./components/Home";

function App() {
  const { user } = useContext(UserContext);

  return (
    <div className="container">
      <Router>
        <Routes>
          {user && <Route path="/" exact element={<Home />} />}
          {!user && (
            <>
              <Route path="/login" element={<Login />} />
              <Route path="/signup" element={<Register />} />
            </>
          )}
          <Route path="*" element={<Navigate to={user ? "/" : "/login"} />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

Kindly help

2

Hi,

Do you see such content in the console ?
image

Did you try browsing manually to the mentioned address ? (Should be localhost:3000 )

Regards.