The Link component from react-router-dom is behaving like an anchor element. It refreshes the page and navigates me to that page. How can I fix this
The Link component from react-router-dom is behaving like an anchor element. It refreshes the page and navigates me to that page. How can I fix this
<Link
className={clsx('menu-link py-3', {
'active menu-here': checkIsActive(pathname, to),
})}
to={to}
>
</Link>
<div
id='kt_app_header_wrapper'
className='d-flex align-items-stretch justify-content-between flex-lg-grow-1 '
>
{config.app.header.default?.content === 'menu' &&
config.app.header.default.menu?.display && (
<div
className='app-header-menu app-header-mobile-drawer align-items-stretch mx-auto'
data-kt-drawer='true'
data-kt-drawer-name='app-header-menu'
data-kt-drawer-activate='{default: true, lg: false}'
data-kt-drawer-overlay='true'
data-kt-drawer-width='225px'
data-kt-drawer-direction='end'
data-kt-drawer-toggle='#kt_app_header_menu_toggle'
data-kt-swapper='true'
data-kt-swapper-mode="{default: 'append', lg: 'prepend'}"
data-kt-swapper-parent="{default: '#kt_app_body', lg: '#kt_app_header_wrapper'}"
>
<Header />
</div>
)}
<Navbar />
</div> inside this
Replies (4)
Whatever i use inside this drawer component it
Behaves like anker element
Hi Ruthra,
Sorry for the late reply.
Could you please specify what Metronic version you are using?
We do not have any issues using the react-router-dom links inside our custom component elements.
Are you getting any errors?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi,
Make sure that the route you are setting to Link component is registered in your router file.
Also, ensure that you are importing the Link component from the right dependency, the component should be imported from react-router-dom as shown below.
import {Link} from "react-router-dom"Regards,
Lauris Stepanovs,
Keenthemes Support Team
The link outside the dropdown works, but the links under the dropdown do not work. It refreshes the page. We are waiting for a solution to this.
