React Router中用户组件的放置与传参方案，是否使用Context？

对于你的场景，**React Context + useReducer（或useState）**是最优解——既解决了跨组件（

return (<Login/>)

和

return (<Root/>)

）共享状态的问题，又不需要引入复杂的第三方状态库，适合React新手上手。下面是具体实现步骤：

一、创建用户状态Context和Provider #

新建src/contexts/UserContext.tsx文件，封装用户状态的Context和Provider：

import { createContext, useContext, useReducer, ReactNode } from 'react';

// 定义用户状态类型
type UserState = {
  isLoggedIn: boolean;
  username: string | null;
  token: string | null;
};

// 定义动作类型
type UserAction = 
  | { type: 'LOGIN'; payload: { username: string; token: string } }
  | { type: 'LOGOUT' };

// 初始状态
const initialState: UserState = {
  isLoggedIn: false,
  username: null,
  token: null,
};

// 状态更新 reducer
function userReducer(state: UserState, action: UserAction): UserState {
  switch (action.type) {
    case 'LOGIN':
      return {
        ...state,
        isLoggedIn: true,
        username: action.payload.username,
        token: action.payload.token,
      };
    case 'LOGOUT':
      return initialState;
    default:
      return state;
  }
}

// 创建Context
const UserContext = createContext<{
  state: UserState;
  dispatch: React.Dispatch<UserAction>;
} | undefined>(undefined);

// 封装Provider组件
export function UserProvider({ children }: { children: ReactNode }) {
  const [state, dispatch] = useReducer(userReducer, initialState);
  return (
    <UserContext.Provider value={{ state, dispatch }}>
      {children}
    </UserContext.Provider>
  );
}

// 自定义Hook，简化Context调用
export function useUser() {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error('useUser must be used within a UserProvider');
  }
  return context;
}

二、在入口文件包裹路由 #

修改src/index.tsx，把RouterProvider放在UserProvider内部，确保所有路由组件都能访问用户状态：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { UserProvider } from './contexts/UserContext';
import Root from './Root';
import Login from './Login';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
  },
  {
    path: '/login',
    element: <Login />,
  },
]);

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <UserProvider>
      <RouterProvider router={router} />
    </UserProvider>
  </React.StrictMode>,
);

三、修改Login组件处理登录回调 #

在Login.tsx中使用useUser Hook更新用户状态：

import { useUser } from './contexts/UserContext';
import { useNavigate } from 'react-router-dom';

export default function Login() {
  const { dispatch } = useUser();
  const navigate = useNavigate();

  // 模拟登录接口回调
  const handleLogin = async () => {
    // 这里替换成实际的登录请求逻辑
    const loginRes = await fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify({ username: 'test', password: '123' }),
    });
    const data = await loginRes.json();

    // 触发登录动作，更新全局状态
    dispatch({
      type: 'LOGIN',
      payload: { username: data.username, token: data.token },
    });

    // 登录成功后跳转到首页
    navigate('/');
  };

  return (
    <div>
      <h2>登录</h2>
      <button onClick={handleLogin}>模拟登录</button>
    </div>
  );
}

四、修改Root组件根据状态渲染内容 #

在Root.tsx中使用useUser Hook获取状态，动态渲染：

import { useUser } from './contexts/UserContext';
import { Link } from 'react-router-dom';

export default function Root() {
  const { state, dispatch } = useUser();

  const handleLogout = () => {
    dispatch({ type: 'LOGOUT' });
  };

  return (
    <div>
      <header>
        {state.isLoggedIn ? (
          <div>
            <span>欢迎，{state.username}</span>
            <button onClick={handleLogout}>退出登录</button>
          </div>
        ) : (
          <Link to="/login">登录</Link>
        )}
      </header>
      <main>
        <h1>首页内容</h1>
      </main>
    </div>
  );
}

几种方案的对比 #

• 状态提升到index.tsx：短期可行，但如果后续新增更多需要用户状态的组件，会出现层层传props的“props drilling”问题，维护成本高。
• UserInfo组件单独用useState：不可行，因为

  return (<Login/>)
  

  和

  return (<Root/>)
  

  是独立组件，无法共享该组件内部的状态。
• Context API：最优解，实现全局状态共享，避免props drilling，代码结构清晰，无需第三方依赖，适合你的场景。

内容的提问来源于stack exchange，提问作者Adriano N Rodrigues