White screen when trying to use useNavigate() react router

Question

I have tried using navigate() to go to the profile page but when I reload my react app it's just a white screen but I have defined the path '/profile'?

function App() {
  const navigate = useNavigate();
  return (
    <div className="App" style={{height: '100%', minHeight: '100vh', backgroundColor: '#FFFDC8'}}>
      <h1>Auction App</h1>
      <Button variant="contained">Auctions</Button>
      <Button variant="contained">My Auctions</Button>
      <Button variant="contained" onClick={() => navigate("/profile")}>Profile</Button>
        
      <Router>
        <Routes>
          <Route path='/' element={<Auctions />} />
          <Route path='/register' element={<Register />} />
          <Route path='/login' element={<Login />} />
          <Route path='/auctions' element={<Auctions />} />
          <Route path='/auction/:auctionId' element={<AuctionItem />} />
          <Route path='/my-auctions' element={<MyAuctions />} />
          <Route path='/profile' element={<Profile />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

Answer 1

Issue

The App component is rendering the Router that is providing the routing context, so App itself can't use the useNavigate hook since it's outside the router.

Solution

I am assuming that Router is really one of the higher-level routers (BrowserRouter, MemoryRouter, etc). Move the Router higher in the ReactTree than the App component in order to provide a routing context to App and allow proper useNavigate hook usage.

Example:

<Router>
  <App />
</Router>

App

function App() {
  const navigate = useNavigate();
  return (
    <div
      className="App"
      style={{
        height: '100%',
        minHeight: '100vh',
        backgroundColor: '#FFFDC8'
      }}
    >
      <h1>Auction App</h1>
      <Button variant="contained">Auctions</Button>
      <Button variant="contained">My Auctions</Button>
      <Button variant="contained" onClick={() => navigate("/profile")}>
        Profile
      </Button>
     
      <Routes>
        <Route path='/' element={<Auctions />} />
        <Route path='/register' element={<Register />} />
        <Route path='/login' element={<Login />} />
        <Route path='/auctions' element={<Auctions />} />
        <Route path='/auction/:auctionId' element={<AuctionItem />} />
        <Route path='/my-auctions' element={<MyAuctions />} />
        <Route path='/profile' element={<Profile />} />
      </Routes>
    </div>
  );
}

Answer 2

It would help if you had BrowserRouter .

 <BrowserRouter>
      <Routes>
       <Route path="/" element={<Auctions />} />
       <Route path="/register" element={<Register />} />
       <Route path="/login" element={<Login />} />
       ........
       ........
      </Routes>
  </BrowserRouter>