0

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]);
Zoe
  • 27,060
  • 21
  • 118
  • 148
user
  • 3
  • 2
  • I'm not sure if I totally grasp your issue, but looking at this, the `/trending` and `/disliked` routes are currently unreachable because `/` will match everything immediately on the `/movies` path. Try making all three of your sub-routes for that path `exact`. – lawrence-witt Jul 24 '21 at 21:51
  • I can't access the props for any of the routes, once path="/" is working I'll worry about the matching. I plan on using MediaGridContainer or MediaGrid for many classes i.e. – user Jul 24 '21 at 22:07

1 Answers1

0

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>
  );
}
Soufiane Boutahlil
  • 2,554
  • 1
  • 7
  • 13