React.js登录后跳转Dashboard：BrowserRouter报错及tasks未定义问题

一、解决useNavigate() may be used only in the context of a <Router> component错误 #

初始代码中，未登录时直接返回<Login />，此时Login组件不在BrowserRouter上下文范围内，导致useNavigate调用失败。

修正方案：统一路由逻辑，确保所有组件处于Router上下文 #

修改App.js，将登录状态判断整合到路由规则中，不再直接返回Login组件：

import Dashboard from './components/Dashboard/Dashboard';
import Login from './components/Login/Login';
import { Route, Routes, Navigate } from "react-router-dom";
import './App.css';
import useToken from './useToken';

function App({ tasks }) {
  const { token, setToken } = useToken();
  
  return (
    <div>
      <Routes>
        {/* 登录页面路由 */}
        <Route path="/login" element={<Login setToken={setToken} />} />
        {/* 默认路由：未登录跳登录页，已登录跳Dashboard */}
        <Route path="/" element={token ? <Navigate to="/dashboard" /> : <Navigate to="/login" />} />
        {/* Dashboard路由：未登录禁止访问，重定向到登录页 */}
        <Route path="/dashboard" element={token ? <Dashboard tasks={tasks} /> : <Navigate to="/login" />} />
      </Routes>
    </div>
  );
}

export default App;

由于你已经在index.js中用BrowserRouter包裹了App，修改后所有组件都处于Router上下文，useNavigate可正常调用。

二、解决tasks is undefined错误 #

更新代码后跳转Dashboard时出现该错误，原因是路由渲染Dashboard时未传入tasks属性。

修正方案：传递tasks属性并设置默认值 #

1. 在App.js的Dashboard路由中，将从index.js接收的tasks传递给组件：

<Route path="/dashboard" element={token ? <Dashboard tasks={tasks} /> : <Navigate to="/login" />} />

2. 为避免props.tasks为空时出错，在Dashboard.js中给useState设置默认值：

// Dashboard.js
export default function Dashboard(props) {
    // 当props.tasks不存在时，使用空数组作为初始值
    const [tasks, setTasks] = useState(props.tasks || []);
    // ... 其余代码保持不变
}

额外优化 #

• Login组件中按钮类型错误：将type="login"改为type="submit"，否则表单无法触发onSubmit事件：

// Login.js
<button type="submit">Login</button>

• 登录逻辑可添加简单校验：比如判断返回的token是否包含有效字段，避免无效值存入状态。

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