尝试使用 useNavigate() 反应路由器时出现白屏

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;

Answer 1

如果你有 BrowserRouter 会有所帮助。

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

Answer 2

问题

App 组件正在呈现提供路由上下文的 Router，因此 App 本身不能使用 useNavigate 挂钩，因为它是 在路由器外。

解决方案

我假设 Router 确实 higher-level 路由器之一（BrowserRouter，MemoryRouter，等等）。将 ReactTree 中的 Router 移动到比 App 组件更高的位置，以便为 App 提供路由上下文并允许正确使用 useNavigate 挂钩。

示例：

<Router>
  <App />
</Router>

应用程序

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

尝试使用 useNavigate() 反应路由器时出现白屏

White screen when trying to use useNavigate() react router

reactjs

react-router

react-router-dom

问题

解决方案