ReactJS中无需导入组件，如何在路由间传递状态？

嘿，我完全懂你的问题！你想让两个路由组件（Body和User）共享employeeCurrent状态，但又不想因为在Body里导入User导致两个组件同时渲染——这确实是React路由里常见的状态共享痛点，给你几个实用的解决方案，都不需要直接在Body里导入User：

方案1：通过React Router的Link传递状态 #

既然你已经在用react-router-dom的Link组件跳转，直接利用它的state属性就能把状态带给User组件，步骤超简单：

• 在Body组件的Link里添加state属性，传入你的employeeCurrent状态：

  <Link 
    to="/user" 
    state={{ employeeCurrent: this.state.employeeCurrent }}
  >
    跳转到用户页面
  </Link>
  

• 然后在User组件里获取这个状态：
  如果User是函数组件，用useLocation钩子：

  import { useLocation } from 'react-router-dom';
  
  function User() {
    const location = useLocation();
    // 用可选链操作符避免状态未定义时报错
    const employeeCurrent = location.state?.employeeCurrent;
  
    return <div>当前选中员工：{employeeCurrent?.name}</div>;
  }
  

  如果User是类组件，需要用withRouter包裹来获取location属性：

  import React from 'react';
  import { withRouter } from 'react-router-dom';
  
  class User extends React.Component {
    render() {
      const employeeCurrent = this.props.location.state?.employeeCurrent;
      return <div>当前选中员工：{employeeCurrent?.name}</div>;
    }
  }
  
  export default withRouter(User);
  

  这个方案适合一次性传递状态，简单直接，但如果状态需要后续更新并同步到多个组件，就不太灵活了。

方案2：用React Context API做全局状态共享 #

如果employeeCurrent状态需要在多个组件间共享，或者后续要更新状态并同步到所有用到它的组件，Context API是更合适的选择，完全符合你“不直接导入组件”的需求：

1. 先创建一个Context文件（比如EmployeeContext.js）：

import React, { createContext, useState, useContext } from 'react';

// 创建Context实例
const EmployeeContext = createContext();

// 创建Provider组件，用来包裹整个路由应用
export function EmployeeProvider({ children }) {
  // 定义全局状态和更新方法
  const [employeeCurrent, setEmployeeCurrent] = useState(null);

  return (
    <EmployeeContext.Provider value={{ employeeCurrent, setEmployeeCurrent }}>
      {children}
    </EmployeeContext.Provider>
  );
}

// 自定义钩子，简化组件获取Context的代码
export function useEmployee() {
  return useContext(EmployeeContext);
}

2. 在你的路由根组件（比如App.js）里，用EmployeeProvider包裹所有路由：

import { EmployeeProvider } from './EmployeeContext';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Body from './Body';
import User from './User';

function App() {
  return (
    <EmployeeProvider>
      <Router>
        <Routes>
          <Route path="/" element={<Body />} />
          <Route path="/user" element={<User />} />
        </Routes>
      </Router>
    </EmployeeProvider>
  );
}

3. 在Body组件里更新全局状态：
   如果Body是函数组件，直接用自定义钩子：

import React from "react";
import "./Body.css";
import axios from "axios";
import { Link } from "react-router-dom";
import { useEmployee } from './EmployeeContext';

function Body() {
  const { setEmployeeCurrent } = useEmployee();

  // 比如在axios请求后更新状态
  const fetchEmployee = async () => {
    const response = await axios.get('/api/employee');
    setEmployeeCurrent(response.data);
  };

  return (
    <div className="Body">
      {/* 你的Body组件内容 */}
      <button onClick={fetchEmployee}>获取员工数据</button>
      <Link to="/user">跳转到用户页面</Link>
    </div>
  );
}

如果Body是类组件，用Context.Consumer来获取更新方法：

import React from "react";
import "./Body.css";
import axios from "axios";
import { Link } from "react-router-dom";
import { EmployeeContext } from './EmployeeContext';

class Body extends React.Component {
  fetchEmployee = async () => {
    const response = await axios.get('/api/employee');
    // 通过Consumer拿到setEmployeeCurrent方法
    this.props.setEmployeeCurrent(response.data);
  };

  render() {
    return (
      <EmployeeContext.Consumer>
        {({ setEmployeeCurrent }) => (
          <div className="Body">
            {/* 你的Body组件内容 */}
            <button onClick={this.fetchEmployee}>获取员工数据</button>
            <Link to="/user">跳转到用户页面</Link>
          </div>
        )}
      </EmployeeContext.Consumer>
    );
  }
}

4. 在User组件里获取全局状态：

import React from 'react';
import { useEmployee } from './EmployeeContext';

function User() {
  const { employeeCurrent } = useEmployee();

  if (!employeeCurrent) {
    return <div>暂无员工数据</div>;
  }

  return (
    <div>
      <h2>员工详情</h2>
      <p>姓名：{employeeCurrent.name}</p>
      <p>部门：{employeeCurrent.department}</p>
    </div>
  );
}

这个方案的优势是状态全局可控，任何被Provider包裹的组件都能访问和更新状态，完全不需要组件间互相导入，完美解决你的核心需求。

方案3：Redux Toolkit（适合复杂应用） #

如果你的应用后续状态逻辑越来越复杂，多个组件需要频繁共享和更新状态，Redux Toolkit会是更专业的选择。不过它的配置相对重一点，如果你只是简单的状态共享，前两个方案足够用了。

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