React中使用Navigate与useState实现条件路由失效问题求助

原代码存在的问题 #

1. 渲染阶段调用异步函数：直接在return中执行checkConnection()会导致组件每次渲染都触发这个异步操作，引发无限重渲染，同时在渲染过程中修改状态违反React运行规则。
2. 初始状态设置错误：walletConnected初始值为空字符串（属于假值），页面刚加载时会直接触发跳转，而此时异步连接检查还未完成。
3. 条件路由逻辑失效：checkConnection()返回Promise（始终为真值），所以/gated路由会被强制渲染，但状态更新不及时，导致跳转操作先于连接状态判断完成。

修复方案 #

1. 用useEffect执行连接检查：将连接验证逻辑放入useEffect，确保只在组件挂载时执行一次。
2. 初始化状态为null：用null表示连接状态未确定，避免初始假值导致误跳转。
3. 增加加载状态处理：在连接状态未明确时，渲染加载组件，等待检查完成后再决定跳转或渲染目标页面。
4. 移除exact属性：React Router v6中路由默认精确匹配，无需手动添加该属性。

修正后的完整代码 #

import { useState, useEffect } from 'react';
import { Router, Routes, Route, Navigate } from 'react-router-dom';
import Home from './Home'; // 确保导入对应组件
import SignInPage from './SignInPage';
import GeneratorPage from './GeneratorPage';
import Ethers from './Ethers';

function App() {
  const [walletConnected, setWalletConnected] = useState(null); // 初始状态设为null

  useEffect(() => {
    async function checkConnection() {
      try {
        const accounts = await window.ethereum.request({ method: 'eth_accounts' });
        setWalletConnected(accounts.length > 0);
      } catch (error) {
        console.error('钱包连接检查失败:', error);
        setWalletConnected(false);
      }
    }
    checkConnection();
  }, []); // 空依赖数组确保只执行一次

  return (
    <Router>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/signin' element={<SignInPage />} />
        <Route path='/generator' element={<GeneratorPage />} />
        <Route path='/ethers' element={<Ethers />} />
        <Route path='/connected' element={<GeneratorPage />} />
        <Route
          path="/gated"
          element={
            walletConnected === null ? (
              <div>加载中...</div> {/* 可替换为自定义加载组件 */}
            ) : walletConnected ? (
              <GeneratorPage />
            ) : (
              <Navigate to="/" />
            )
          }
        />
      </Routes>
    </Router>
  );
}

export default App;

额外说明 #

• 增加错误捕获逻辑，处理钱包请求失败的情况，避免程序崩溃。
• 加载状态的渲染可根据需求替换为更美观的组件（如加载动画），提升用户体验。

内容的提问来源于stack exchange，提问作者Pajke