在使用React Router v5和Redux时，无法理解如何将道具传递给组件

Question

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

我正在学习如何通过黑客攻击做出反应，但我已经被困在这上面超过4个小时了。我已经阅读了我能找到的每一篇文章，并访问了许多声称有解决我问题的方法的网站。这里发布的解决方案几乎涵盖了每一篇文章的解决方案（使用渲染）。反应路由器通行道具到路由组件

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

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

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]);

Answer 1

要将道具传递给组件，请使用渲染道具，还应更改路径以/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>
  );
}