如何在react-router-dom中传递useState实现路由间状态复用？

方式一：直接通过Route的element传递props #

这是最直接的方式，适合组件层级简单的场景：

1. 在路由所在的父组件中声明状态：

import { useState } from 'react';
import { Router, Routes, Route } from 'react-router-dom';

function App() {
  const [owner, setOwner] = useState(null);

  return (
    <Router>
      <Navbar owner={owner} />
      <Routes>
        {/* 给Login组件传递owner和setOwner */}
        <Route path="/login" element={<Login owner={owner} setOwner={setOwner} />} />
        {/* 其他需要使用owner的组件同样传递props */}
        <Route path="/" element={<Gallery owner={owner} />} />
        <Route path="/saved" element={<SavedItem owner={owner} />} />
        {/* 其余路由保持原有配置 */}
      </Routes>
    </Router>
  );
}

2. 在Login组件中接收并使用props：

function Login({ owner, setOwner }) {
  // 登录成功后更新状态
  const handleLoginSuccess = (userInfo) => {
    setOwner(userInfo);
  };

  return (
    // 登录表单逻辑...
  );
}

这种方式的缺点是如果组件层级较深，需要层层传递props，代码冗余度高。

方式二：使用React Context实现全局状态共享（推荐） #

对于跨路由、跨层级的状态共享，React Context是更优雅的方案，无需手动传递props：

1. 创建AuthContext文件 #

// AuthContext.js
import { createContext, useContext, useState } from 'react';

// 创建上下文
const AuthContext = createContext();

// 上下文提供者组件
export function AuthProvider({ children }) {
  const [owner, setOwner] = useState(null);

  // 把状态和修改方法存入上下文
  const contextValue = {
    owner,
    setOwner
  };

  return (
    <AuthContext.Provider value={contextValue}>
      {children}
    </AuthContext.Provider>
  );
}

// 自定义Hook，简化上下文获取
export function useAuth() {
  return useContext(AuthContext);
}

2. 在路由外层包裹AuthProvider #

import { AuthProvider } from './AuthContext';
import { Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <AuthProvider>
      <Router>
        <Navbar />
        <Routes>
          {/* 无需再给Route手动传props */}
          <Route path="/login" element={<Login />} />
          <Route path="/" element={<Gallery />} />
          <Route path="/saved" element={<SavedItem />} />
          {/* 其余路由保持原有配置 */}
        </Routes>
      </Router>
    </AuthProvider>
  );
}

3. 在Login组件中更新状态 #

import { useAuth } from './AuthContext';

function Login() {
  const { setOwner } = useAuth();

  const handleLogin = async () => {
    // 模拟登录请求，获取用户信息
    const userInfo = await fetch('/api/login').then(res => res.json());
    // 更新全局状态
    setOwner(userInfo);
  };

  return (
    <button onClick={handleLogin}>登录</button>
  );
}

4. 在其他组件中复用状态 #

比如在Navbar或Gallery组件中：

import { useAuth } from './AuthContext';

function Navbar() {
  const { owner } = useAuth();

  return (
    <nav>
      {owner ? (
        <span>欢迎回来，{owner.name}</span>
      ) : (
        <a href="/login">请登录</a>
      )}
    </nav>
  );
}

这种方式下，所有被AuthProvider包裹的组件都能通过useAuth Hook直接获取和修改状态，无需层层传递props，适合复杂应用的状态共享需求。

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