使用 Navigate 和 useState 反应条件路由

Question

I need help figuring out something.

I have the following React app:

function App() {
  const [walletConnected, setWalletConnected] = useState("")

  async function checkConnection() {
    const accounts = await window.ethereum.request({ method: 'eth_accounts' }) 
    if (accounts.length > 0) {
      setWalletConnected(true)
    } else {
      setWalletConnected(false)
    }
  }

  return (
    <>
    <Router>
      <Routes>
        <Route exact path='/' element={<Home/>}/>
        <Route exact path='/signin' element={<SignInPage/>}/>
        <Route exact path='/generator' element={<GeneratorPage/>}/>
        <Route exact path='/ethers' element={<Ethers/>}/>
        <Route exact path='/connected' element={<GeneratorPage/>}/>
        {checkConnection() && <Route
          exact
          path="/gated"
          element = {walletConnected ? <GeneratorPage/> : <Navigate to="/" />} /> 
        }
      </Routes> 
    </Router>
    </>
  );
}

What I am basically trying to implement is conditional routing. But it doesn't work in it's current form.

What's interesting is, if I don't use <Navigate to= /> but instead render a page element, the code works fine and I get the page to render correctly.

It seems what is happening is that the condition doesn't get switched fast enough, and React instantly navigates to the page, without giving a chance for <GeneratorPage/> to render.

Answer 1

You are checking the condition like this

checkConnection() && <Route ....

but your checkConnection() method doesn't return anything.

You can call the checkConnection() inside an useEffect

useEffect( () => {
  checkConnection()
},[])

and modify the code like this

<Route
    exact
    path="/gated"
    element = {walletConnected ? <GeneratorPage/> : <Navigate to="/" 
/>

.. other routes