How to handle URL parameter in react

Question

I have an app in reactJs, using redux and router. I am sorry if this question is more about logic than code, but the problem is very narrow.

I have in my app different categories and each category will set the route like this :

/:category1/
/:category1/:item1
/:category1/:item1/:scheduling1

There is over 50 different route and I set them up all in my router.

        <PrivateRoute path="/:category1/:item1/:scheduling1" component={SchedulingComponent} />
        <PrivateRoute path="/:category1/:item1" component={ItemComponent} />
        <PrivateRoute path="/:category1" component={CateogryComponent} />

Now this work great when the user navigate in the app.

The problem I face is when the user reload the browser or access a link directly.

Since all those path are actually ids, If I access for example /:category1/:item1/:scheduling1

I need to dispatch 3 concatenated action in my redux store

selectCategory
selectItem
selectScheduling

The problem is I do not know how to correctly handle it.

I am confused if the best would be in each component's ComponentDidMount to dispatch some call (but it would also happen when the user navigate and those call are not needed)

Or if there is a way on first load to dispatch all the necessary action. Like making a component in <app> that would just read and dispatch the action when it's mounted (so only once)

What's the problem with having each componentDidMount fetch the needed part? You say you don't need them if the user navigates; how do you get the data then? Why not simply fetch in componentDidMount if the data is not present (ie. the user came from a link)? — Nicolas SEPTIER
– Nicolas SEPTIER, Commented Mar 18, 2020 at 8:49
@NicolasSEPTIER when I navigate, the component that made the navigation happen set the props and change the paths. So it works as long as a user stay on the page, since redux state is update and the component are displayed. When you visit a page with a set of other ids that are not the one stored, redux need to update to adapt to the provided id. This is the part I do not know how to do correctly. What I mean by not need is, when I navigate, the state are already set, so those component do not need to set redux. But when I visit for the first time, they have to do it. — Crocsx
– Crocsx, Commented Mar 18, 2020 at 9:14
So if I understand correctly you'd like the route parameters to be set in the redux state before the route renders the component? — HMR
– HMR, Commented Mar 18, 2020 at 9:21

HMR · Accepted Answer · 2020-03-18 13:20:11Z

1

Not sure if this will work for you but maybe you can set redux state before rendering any route content:

function Connected({ Component, ...props }) {
  const dispatch = useDispatch();
  //route changed, dispatch action that will set redux state
  //  assuming this is a sync op
  dispatch({ type: 'PARAM_CHANGE', payload: useParams() });
  //render actual route content, redux state should have been set
  //  with the route parameters
  return <Component {...props} />;
}
const ConnectedRoute = ({
  component: Component,
  ...props
}) => (
  <Route
    {...props}
    render={props => {
      return <Connected Component={Component} {...props} />;
    }}
  />
);

In your route you can use ConnectedRoute:

<Switch>
  <ConnectedRoute
    path="/:id"
    component={SomeContentNeedingIdInReduxState}
  />
  <Route path="/" component={Home} />
</Switch>

The problem with this is that redux store follows react-router and when react-router changes route the route data will be copied in the store. When you play back actions in redux dev tools then it won't do what you expect.

To have react-router follow redux store and change route through actions you can use this package.

edited Mar 18, 2020 at 13:20

answered Mar 18, 2020 at 11:49

HMR

39.5k26 gold badges99 silver badges175 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Crocsx Over a year ago

thanks, I think I will go with the package or some kind of modified version of your post.

Collectives™ on Stack Overflow

How to handle URL parameter in react

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related