multiple nav link for a component render each click using reactjs

Question

I am facing a problem in route how to render the same component in multiple nav link.

I have 2 nav link like this. when I click on edit product, the component render with detail successfully. After that, I click on add a product then component does not render again because component already rendered on the edit product link.

I am using the same component for add and edit.

Anyone can tell me how to Re-render that component on the next click.?

Thanks in advance

          <Route
            path="/addproduct"
            render={() => {
              return userData.is_superuser === true ? (
                <Product />
              ) : (
                <Redirect to="/dashboard" />
              );
            }}
          />
        <Route path="/editproduct/:id" component={Product} />

Answer 1

Try using render property as follows

<Route path="/editproduct/:id" render={() => <Product/> } />

did you wrap your routes with Switch component?

Just an extra info, you should take a look at react lazy/suspense , is used for code splitting, is useful for decreasing SPAs load times.

Answer 2

I found how to resolve this problem.

You need to use componentWillReceiveProps function in your component.

clicked a link first time by calling url www.example.com/content1/ componentDidMount() is run.

Now when you click another link say www.example.com/content2/ same component is called but this time prop changes and you can access this new prop under componentWillReceiveProps(nextProps) which you can use to call API Or make state blank and get new data.

componentWillReceiveProps(nextProps){
     //call your API and update state with new props
}