using same component for different route path in react-router v4

Question

I am trying to have separate routes but same component for add/edit forms in my react app like the below:

<Switch>
        <Route exact path="/dashboard" component={Dashboard}></Route>
        <Route exact path="/clients" component={Clients}></Route>
        <Route exact path="/add-client" component={manageClient}></Route>
        <Route exact path="/edit-client" component={manageClient}></Route>        
        <Route component={ NotFound } />        
</Switch>

Now in the manageClient component, I parse the query params (I pass in a query string with client id in edit route), I render conditionally based on the query param passed.

The problem is that this doesn't remount the whole component again. Say an edit page is opened, and the user clicks on add component, the URL changes, but the component doesn't reload and hence remains on the edit page.

Is there a way to handle this?

In the root DOM element of manageClient's render() method, try to add a key, whose value is based on whatever querystring you give it. For example, try having it be key="add" for /add-client and key="edit" for /edit-client. (I actually don't know if this will work, which is why I'm not submitting it as an answer) — sme
– sme, Commented Feb 27, 2018 at 4:18

score 84 · Accepted Answer · 2019-03-21 20:18:51Z

84

Using different key for each route should force components to rebuild:

    <Route 
      key="add-client"
      exact path="/add-client"
      component={manageClient} 
    />

    <Route 
      key="edit-client"
      exact path="/edit-client"
      component={manageClient} 
    />

edited Mar 21, 2019 at 20:18

answered Feb 27, 2018 at 4:32

user5699040

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

4 Comments

Jaison James Over a year ago

Is it possible to catch the key/path from the component itself?

user5699040 Over a year ago

It's possible. You can get route props from components by this.props.route.key

Rimer Over a year ago

This worked for me until I had a dynamic route (with an ID property in the route a la /blog/post/:id)... the key was unique to the URL and ANY ID, but navigating between two IDs maps to the same route and key twice, failing to re-render the route when navigating between two routes mapped to the same router entry... e.g. nav'ing between /blog/post/1 and /blog/post/2 does not re-render either...

silencej Over a year ago

To clarify more, the "key" is to trigger diffing in react reconciliation. FYI github.com/ReactTraining/react-router/issues/5972 and reactjs.org/docs/reconciliation.html

Vigneshwaran Chandrasekaran · Accepted Answer · 2020-05-13 13:09:24Z

11

<Route exact path={["/add-client", "/edit-client"]}>
  <manageClient />
</Route>

Reference

Version 5.2.0

https://reacttraining.com/react-router/web/api/Route/path-string-string

edited May 13, 2020 at 13:09

answered May 13, 2020 at 12:56

Vigneshwaran Chandrasekaran

3,2931 gold badge29 silver badges21 bronze badges

Comments

Mayank Shukla · Accepted Answer · 2018-02-27 05:11:35Z

9

One solution is use inline function with component, that will render a new component each time, But this is not a good idea.

Like this:

<Route exact path="/add-client" component={props => <ManageClient {...props} />}></Route>
<Route exact path="/edit-client" component={props => <ManageClient {...props} />}></Route>

Better solution would be, use componentWillReceiveProps lifecycle method in ManageClient component. Idea is whenever we render same component for two routes and switching between them, then react will not unmount-mount component, it will basically update the component only. So if you are making any api call or require some data do all in this method on route change.

To check, use this code and see it will get called on route change.

componentWillReceiveProps(nextProps){
   console.log('route chnaged')
}

Note: Put the condition and make the api call only when route changes.

edited Feb 27, 2018 at 5:11

answered Feb 27, 2018 at 4:34

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

2 Comments

adam8810 Over a year ago

I believe this is the better answer. Suggesting the use of componentWillReceiveProps as the location to make an API call was what I needed without unmounting/mounting the same component.

Patrik Fuhrmann Over a year ago

componentWillReceiveProps is deprecated now as of React 16.3

Tushar Walzade · Accepted Answer · 2021-11-21 11:06:54Z

1

You can simply provide an array of paths in a single route tag as follows -

<Route exact path={["/add-client", "/edit-client"]} component={manageClient}></Route>

answered Nov 21, 2021 at 11:06

Tushar Walzade

3,8274 gold badges38 silver badges60 bronze badges

Comments

Moumit · Accepted Answer · 2020-06-17 15:17:58Z

My problem was we used an common path in-between, which causes dynamic path to not working

      <Switch>
        <Route key="Home" path="/home" component={Home} />
        <Route key="PolicyPlan-create"  path="/PolicyPlan/create" component={PolicyPlanCreatePage} />
        {/* <Route key="PolicyPlan-list" path="/PolicyPlan" component={PolicyPlanListPage} /> */}
        <Route key="PolicyPlan-list" path="/PolicyPlan/list" component={PolicyPlanListPage} />            
        <Route key="PolicyPlan-edit"  path="/PolicyPlan/edit/:id" component={PolicyPlanCreatePage} />   
        <Route key="cardDesign" path="/cardDesign" component={cardDesign} />
        <Route key="Admin-create" path="/admin/create" component={RegisterPage} />
      </Switch>

So don't use the path like the commented one, now the code is working

.................
          this.props.history.push("/PolicyPlan/edit/" + row.PolicyPlanId);
.............

Collectives™ on Stack Overflow

using same component for different route path in react-router v4

5 Answers 5

4 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related