0

I am using Ant design breadcrumbs. I am trying to change the page using link and pushing the URL, I can see the URL change but the page in not changing.

I tried using Link, then creating a function for onClick but everything just change the URL.

Route: 
<Route exact path="/assistant/:wId/skill/xyz/:sid" component={ xyz } />

Tried process 1: 

<Breadcrumb separator=">">
 <Breadcrumb.Item 
     onClick={this.redirectToParam2}>   
     {param2}
 </Breadcrumb.Item>
</Breadcrumb>

redirectToParam2 = () => {            
     this.props.history.push(`/assistant/${wId}/skill/xyz/${sId}`);
 }

Tried process 2:

<Breadcrumb separator=">">
   <Breadcrumb.Item>    
     <Link to= {`/assistant/${wId}/skill/xyz/${sId}`}>
     {param2}
     </Link>
  </Breadcrumb.Item>
</Breadcrumb>

Even I tried without the Breadcrumbs component but it's still not changing the page.

I want the page to change as soon as the URL changes. Thank you in advance.

1
  • Is Link imported from 'react-router-dom'? Sep 25, 2019 at 11:33

2 Answers 2

0

Try this,

import { Link } from "react-router-dom";



 <Breadcrumb separator=">">
   <Breadcrumb.Item>    
     <Link to= {`/assistant/${wId}/skill/xyz/${sId}`}>
     {param2}
     </Link>
  </Breadcrumb.Item>
</Breadcrumb>
1
  • This is what I did written as second above but it didn't worked. @Dixit Savaliya
    – user11958701
    Sep 25, 2019 at 11:25
0

The problem you are running into, is that with changing the parameters used as props for the xyz component, the component is not replaced but gets new properties. Since nothing changes, i'm assuming you have state that gets filled either in the constructor or ComponentWillMount/ComponentDidMount.

React class components have a lifecycle function for this: componentDidUpdate.

componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render.

Use this as an opportunity to operate on the DOM when the component has been updated. This is also a good place to do network requests as long as you compare the current props to previous props (e.g. a network request may not be necessary if the props have not changed).

Quote from react docs, See: https://reactjs.org/docs/react-component.html#componentdidupdate

componentDidUpdate(prevProps) {
  if ((this.props.params.match.sid !== prevProps.params.match.sid) || 
      (this.props.params.match.wid !== prevProps.params.match.wid)) {
    this.populateState(this.props.params.match); //fill your state
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.