Can't figure out how to pass props to components when using React Router v5 and Redux

Question

Using react-router-dom I need to use one component for many url's with props that change the API call to fetch data. I cannot figure out how to pass these props to the components.

I'm learning react by hacking away, but I've been stuck on this for over 4 hours. I've read every post I can find and visited many websites claiming to have the solution to my problem. The solutions posted here cover almost every post's solution (use render). React router pass props to route component

Here is my relevant code, please let me know what else to add if needed. Note: I followed the setup tutorial for react_on_rails and I've been building upon that codebase.

I've tried bypassing the MediaGridContainer.js redux connecter file and use MediaGrid.jsx directly but that also does not work. My API call works fine if I hardcode scope and class_name in MediaGrid.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);

This may be more relevant code:

MediaGrid.jsx

function MediaGrid({ props }){

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

Answer 1

To pass your props to your component use render prop , also you should change your routes to start with /movies, otherwise, your components will not work.

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