在使用 React Router v5 和 Redux 时，无法弄清楚如何将 props 传递给组件

Posted 2023-02-19

【中文标题】在使用 React Router v5 和 Redux 时，无法弄清楚如何将 props 传递给组件

【英文标题】：Can't figure out how to pass props to components when using React Router v5 and Redux

【发布时间】：2021-10-01 10:47:42

【问题描述】：

使用 react-router-dom 我需要为多个 url 使用一个组件，其中的 props 会更改 API 调用以获取数据。我不知道如何将这些道具传递给组件。

我正在学习通过破解来做出反应，但我已经坚持了 4 个多小时。我已经阅读了我能找到的每一篇文章，并访问了许多声称可以解决我的问题的网站。此处发布的解决方案几乎涵盖了每个帖子的解决方案（使用渲染）。 React router pass props to route component

这是我的相关代码，如果需要，请告诉我还有什么要添加的。注意：我遵循了 react_on_rails 的设置教程，并且一直在该代码库上进行构建。

我尝试绕过 MediaGridContainer.js redux 连接器文件并直接使用 MediaGrid.jsx，但这也不起作用。如果我在 MediaGrid.jsx 中硬编码范围和 class_name，我的 API 调用就可以正常工作。

HelloWorldApp.jsx

const HelloWorldApp = (props) => (
  <Provider store=configureStore(props)>
    <Router>
      <Header />
      <Switch>
        <Route path="/about">
          <HelloWorldContainer />
        </Route>
        <Route path="/movies">
          <Movies />
        </Route>
      </Switch>
    </Router>
  </Provider>
);
function Movies()    return (
      <Switch>
        <Route path="/">
          <MediaGridContainer class_name="movies" scope="popular" />
        </Route>
        <Route path="/trending" exact=true>
          <MediaGridContainer class_name="movies" scope="trending" />
        </Route>
        <Route path="/disliked">
          <MediaGridContainer class_name="movies" scope="disliked" />
        </Route>
      </Switch>   
 ); 



MediaGridContainer.js

const mapStateToProps = (state, ownProps = ) => 
  console.log('ownprops') // state
  console.log(ownProps) // 
  return props: ownProps;


// Note that we don't export MediaGrid, but the redux "connected" version of it.
export default connect(mapStateToProps, actions)(MediaGrid);

这可能是更相关的代码：

MediaGrid.jsx

function MediaGrid( props )

  useEffect(() => 
    // setIsLoading(true);
    loadObjects(props.class_name, props.scope).then(() => 
      // setIsLoading(false);
    );
  , [dispatch, loadObjects]);

【问题讨论】：

我不确定我是否完全掌握了您的问题，但看看这个，/trending 和 /disliked 路由当前无法访问，因为 / 将立即匹配 /movies 上的所有内容小路。尝试为该路径创建所有三个子路由exact。

我无法访问任何路线的道具，一旦 path="/" 工作，我会担心匹配。我计划将 MediaGridContainer 或 MediaGrid 用于许多类，即

【参考方案1】：

要将你的道具传递给你的组件使用render prop，你也应该改变你的路线以/movies开头，否则你的组件将无法工作。

function Movies() 
  return (
    <Switch>
      <Route
        path="/movies"
        exact
        render=() => (
          <MediaGridContainer class_name="movies" scope="popular" />
        )
      />

      <Route
        path="/movies/trending"
        render=() => (
          <MediaGridContainer class_name="movies" scope="trending" />
        )
      />

      <Route
        path="/movies/disliked"
        render=() => (
          <MediaGridContainer class_name="movies" scope="disliked" />
        )
      />
    </Switch>
  );

【讨论】：

我完全复制了您的代码，但是当我使用 console.log() 时，道具仍然显示为空对象。有什么线索会发生什么吗？

我们需要查看组件 MediaGridContainer 以获得有关该问题的更多信息。

它的 MediaGrid(props) 不是 MediaGrid( props )。

MediaGridContainer.js 已全部发布，但导入除外。如果我绕过 MediaGridContainer 而是调用 道具仍然丢失。

非常感谢，我认为这很简单。