How to navigate to a different page when we click on Breadcrumb option?

[Abhishek]

I am using a kendo react breadcrumb component. It has 3 menu items. Home -->Profile-->Details.  If i click on Profile, i want to navigate to Profile.jsx page. How can i do it? i am not getting enough examples on how navigation works in breadcrumbs.  Kindly help me

[Filip]

Hi, Abhishek,

It is possible to add routes to the Breadcrumb component by using react-router-dom since the component does not have inbuilt routing implemented.  We created a runnable example showing how this can be achieved:

https://stackblitz.com/edit/react-n7v9yp-ilzpfy?file=app%2FBreadcrumbContainer.jsx

Here we are targeting the selected item route and pushing it to the history object, then after rendering its children via props the Router changes between the components. 

I hope this example will be useful in your use case. In case it isn't feel free to tell us what issues you are experiencing and we will be glad to assist you further.

Regards,
Filip
Progress Telerik

[Abhishek]

I am already using a drawer component in the application. So when i try to implement the above mentioned code, i am getting a warming like this:   "Hash history cannot PUSH the same path; a new entry will not be added to the history stack"

[Filip]

Hi, Abhishek,

This error occurs when the same path is being pushed into the history object, I can recommend making sure that different paths are being pushed from both the Drawer and the Breadcrumb component.

If the error still persists after that, can you send a runnable reproducible example with the error? This will helps us debug it locally and see if a suitable workaround exists.

Regards,
Filip

[Tanu]

Hii Abhishek,

As per my knowledge, to enable page navigation when clicking on a Kendo React breadcrumb option, you must implement routing in your React application. First, install and set up a routing library like React Router. Define routes for your Home, Profile, and Details pages. Next, integrate the Kendo React breadcrumb component, making sure each breadcrumb item is a link to its respective route. When a user clicks a breadcrumb link, React Router will automatically handle the navigation, directing them to the desired page, such as Profile.jsx in your case.

I will check this link- 

https://stackblitz.com/edit/react-n7v9yp-ilzpfy?file=app%2FBreadcrumbContainer.jsxsplunk course

so you can also check this , it's really helpful

 

I hope this will help you.