使用React Router v5和Redux时如何向路由组件传递自定义props

核心问题1：嵌套路由匹配逻辑错误 #

你把Movies组件挂载在/movies父路径下，内部子路由写的绝对路径没有带上父级前缀，且第一个子路由path="/"会命中所有/movies开头的路径，导致后面的路由永远不会触发，你拿到的永远是第一个路由传入的props。

核心问题2：useEffect依赖项缺失 #

你没有把props.class_name、props.scope加入useEffect依赖数组，就算路由切换传入了新的props，也不会重新触发API请求。 #

修正后的代码 #

1. 调整Movies组件的路由配置 #

function Movies() {   
  return (
    <Switch>
      {/* 注意子路由路径要补全父级前缀，且精确匹配放最前面 */}
      <Route path="/movies/trending" exact={true}>
        <MediaGridContainer class_name="movies" scope="trending" />
      </Route>
      <Route path="/movies/disliked">
        <MediaGridContainer class_name="movies" scope="disliked" />
      </Route>
      {/* 通配路由放最后 */}
      <Route path="/movies">
        <MediaGridContainer class_name={"movies"} scope={"popular"} />
      </Route>
    </Switch>   
  ); 
}

2. 调整MediaGrid.jsx的useEffect依赖 #

function MediaGrid({ props }){
  useEffect(() => {
    loadObjects(props.class_name, props.scope).then(() => {
      // 加载完成逻辑
    });
  }, [dispatch, loadObjects, props.class_name, props.scope]); // 新增两个props作为依赖
  // 其余代码保持不变
}

可选优化（非必须） #

你可以直接把ownProps的字段解构到返回值里，不用额外包裹一层props字段，代码可读性更高：

// MediaGridContainer.js
const mapStateToProps = (state, ownProps = {}) => {
  return {
    class_name: ownProps.class_name,
    scope: ownProps.scope
  };
}

// MediaGrid.jsx 就可以直接接参数
function MediaGrid({ class_name, scope }){
  useEffect(() => {
    loadObjects(class_name, scope).then(() => {
      // 逻辑
    });
  }, [dispatch, loadObjects, class_name, scope]);
}

修改完成后分别访问/movies、/movies/trending、/movies/disliked即可触发不同的API请求。

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