Issue with React-router Link on Metronic V9
I'm with a weird issue related to the Link component on React-router using Metronic V9. If my Link is inside a table or a header, the entire page will be reloaded if the users click on it. But if my Link is inside a simple div or span, it will behave as it should.
Maybe I'm doing something wrong?
Replies (7)
Hi,
Can you provide the example code you are using with your table component?
The issue with the component not being properly initialized in the table may be due to the asynchronous rendering of the table content. To fix this, you should recall KTComponent.init() again after the table content has been rendered.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Sure! I started a new app from scratch using the React integration repository, to be sure that I wasn't missing anything on my current project. I followed react-router tutorial to create some example routes. I'm using the Outlet component to render my components. This is the root layout:
export default function Root() {
const location = useLocation();
useEffect(() => {
KTComponent.init();
KTLayout.init();
}, [location]);
return (
<>
<div className="flex grow">
<Sidebar />
<div className="wrapper flex grow flex-col">
<Header />
<main className="grow content pt-5" role="content">
<div className="container-fixed" >
</div>
<div className="container-fixed">
<Outlet />
</div>
</main>
<Footer />
</div>
</div>
<SearchModal />
</>
)
}This is my simple table component:
export default function GridOne() {
return (
<div className="grid gap-5 lg:gap-7.5">
<h1>Grid One</h1>
<div data-datatable="true">
<div className="scrollable-x-auto">
<table className="table table-auto table-border" data-datatable-table="true">
<thead>
<tr>
<th className="min-w-[200px]">
Grid
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<Link to="/grid-two">Go to grid two</Link>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
)
}I have another grid component (grid two), basically the same as the first one. When I click on the Link component, the entire page re-renders. It seems to be related to the property data-datatable="true", because when I remove it from the div, the Link only renders the Outlet content, as expected.
Hi,
Unfortunately, we were not able to reproduce your problem.
Are you getting any errors in your browser console?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Sadly I got no errors in console. I tried this using Safari, Firefox and Brave, all with the same issue (although on Brave the page reloaded a little bit more seamless, giving the impression that the issue is not happening).
I uploaded two GIFs that shows the problem. The first GIF with the right behavior, and the second one with the issue.
https://imgur.com/a/os0Fuvs
Hi,
Sorry for the late reply.
The issue shown in your provided GIF files doesn't seem to be related to our component initialization.
Please ensure that your route /grid-two is registered and you are importing Link from the react-router-dom as shown below.
import { Link } from "react-router-dom";Regards,
Lauris Stepanovs,
Keenthemes Support Team
Could you guys please upload a code example using react-router and Menu and/or data-datatable components? I'm really without ideas right now. Remember that the problems only happen when I use the property data-datatable="true" or data-menu-item-overflow="true" when using menu.
Hi,
You can find examples of menu component usage in our documentation.
https://keenthemes.com/metronic/tailwind/docs/components/menu#
Regards,
Lauris Stepanovs,
Keenthemes Support Team
