React Router如何从Userlist组件向Userdetail组件传递函数引用？

嘿，我来帮你搞定这个问题！首先得明确一点：Userlist和Userdetail是路由切换的同级组件，不是直接的父子关系，所以不能像普通父子组件那样直接传props。不过结合你用的Redux和React Router，有两种靠谱的实现方式，既满足你的需求，又能保留路由在App.js里的结构。

方案一：让Userdetail直接连接Redux（推荐） #

这其实是最符合Redux设计理念的做法——组件自己获取需要的操作函数，不需要在组件之间来回传递。因为你的更新、删除操作本质都是Redux的action，让Userdetail直接通过connect拿到对应的action creators就好。

步骤： #

1. 在Userdetail.js中导入需要的action creators，然后用connect把它们映射到组件props上：

// Userdetail.js
import { connect } from 'react-redux';
// 假设你的action creators在这个文件里
import { updateUser, deleteUser } from '../actions/userActions';

const Userdetail = ({ location, updateUser, deleteUser }) => {
  // 从Link的state里拿到用户数据
  const user = location.state.user;

  const handleUpdate = () => {
    // 这里可以结合表单逻辑，把更新后的用户数据传进去
    updateUser(user);
  };

  const handleDelete = () => {
    deleteUser(user.id);
  };

  return (
    <div>
      <h2>用户详情：{user.name}</h2>
      {/* 展示用户信息的代码 */}
      <button onClick={handleUpdate}>更新用户</button>
      <button onClick={handleDelete}>删除用户</button>
    </div>
  );
};

// 把action creators映射到props
export default connect(null, { updateUser, deleteUser })(Userdetail);

2. 你的App.js路由完全不需要改动，还是用原来的component={Userdetail}就行：

// App.js 保持原样
<Switch>
  <Route path="/" exact component={Index}/>
  <Route path="/user" exact component={Userlist}/>
  <Route path="/user/:id" exact component={Userdetail}/>
</Switch>

这种方式的好处是组件自治，Userdetail不需要依赖Userlist传递函数，刷新页面也不会有问题，完全符合Redux的单向数据流。

方案二：通过React Router的render方法传递函数 #

如果你坚持要从Userlist传递函数（或者只是想试试这种方式），可以通过路由的render属性来传递props。不过因为Userlist和Userdetail是同级路由，我们需要借助Redux让App.js拿到这些操作函数，再传递给Userdetail。

步骤： #

1. 修改App.js，让它连接Redux并获取action creators，然后用render替代component传递props：

// App.js
import { connect } from 'react-redux';
import { updateUser, deleteUser } from '../actions/userActions';

const App = ({ updateUser, deleteUser }) => {
  return (
    <Switch>
      <Route path="/" exact component={Index}/>
      <Route path="/user" exact component={Userlist}/>
      <Route 
        path="/user/:id" 
        exact 
        render={(routerProps) => (
          // 把路由自带的props（match、location、history）和操作函数一起传进去
          <Userdetail 
            {...routerProps} 
            updateUser={updateUser} 
            deleteUser={deleteUser} 
          />
        )}
      />
    </Switch>
  );
};

export default connect(null, { updateUser, deleteUser })(App);

2. 然后在Userdetail.js里直接用这些props：

// Userdetail.js 不需要连接Redux了
const Userdetail = ({ location, updateUser, deleteUser }) => {
  const user = location.state.user;

  const handleUpdate = () => {
    updateUser(user);
  };

  const handleDelete = () => {
    deleteUser(user.id);
  };

  return (
    <div>
      <h2>用户详情：{user.name}</h2>
      {/* 展示用户信息 */}
      <button onClick={handleUpdate}>更新用户</button>
      <button onClick={handleDelete}>删除用户</button>
    </div>
  );
};

export default Userdetail;

注意事项 #

别尝试通过Link的state传递函数！因为state会被序列化（比如刷新页面后，state里的函数会丢失），只能传递可序列化的数据（比如对象、字符串、数字）。

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