使用 useNavigate() React Router 时出现白屏问题

Question

我尝试使用navigate（）跳转到个人资料页面，但是当我重新加载React应用程序时，屏幕上仅显示白色，而我已经定义了路径“/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;

- Grand Skunk

Answer 1

问题

App 组件正在渲染提供路由上下文的 Router，因此 App 本身无法使用 useNavigate 钩子，因为它在路由之外。

解决方案

我假设 Router 真的是更高级别的路由器之一（例如 BrowserRouter、MemoryRouter 等），将 Router 移动到 React 树中比 App 组件更高的位置，以向 App 提供路由上下文并允许正确使用 useNavigate 钩子。

示例：

<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>
  );
}

- Drew Reese

---

你的意思是将 <Router> <App /> </Router> 放在一个单独的文件中吗？ - Grand Skunk

@GrandSkunk 无论是渲染 App 组件的单独文件是什么。在许多情况下，使用 ReactDOM 或 root.render 的是 index.js 文件，现在在 React 18 中将 Router 组件移动到比 App 更高的位置，以便在路由上下文中呈现。 - Drew Reese

Answer 2

如果您使用BrowserRouter，会更加方便。

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

- Ganesh MB

---

当我在函数中使用'const navigate = useNavigate();'时，屏幕变成了白色。 - Grand Skunk

请仅在 app.js 文件中使用路由器。 - Ganesh MB