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

问题

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?

回答1:

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} 
    />

回答2:

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.

回答3:

<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

来源：https://stackoverflow.com/questions/49001001/using-same-component-for-different-route-path-in-react-router-v4

标签

javascript

reactjs

react-router-v4