I am working on Next 13 Application where when ever i click on navigation links from sidebar it changes the route but my application get reloaded. Instead directly component should be replace as it is SAP should not reload.
Using APP ROUTE
Defining Route
export const dashboardRoute: ItemRoute = {
key: 'dashboard',
title: 'Dashboard',
path: '/',
};
And creating Links like below in SideBar Component
<Link
id="item-child"
href={child.path}
>
{child.title}
</Link>
Then I have layout.tsx where i am wrapping this application with some recoil and brandings looks like below
<html lang="en">
<Head>
<title>App Title</title>
</Head>
<body>
<ErrorBoundary
fallback={
<GlobalError
error={undefined}
reset={function (): void {
throw 'Function not implemented.';
}}
/>
}
>
<RecoilRoot>
<ConfigProvider
>
<Branding>
<StyledJsxRegistry>
{!['/login', '/forgot-password'].some(
(element) => pathName.includes(element)
) ? (
<LayoutTypeOne>{children}</LayoutTypeOne>
) : (
<LayoutTypeTwo>{children}</LayoutTypeTwo>
)}
</StyledJsxRegistry>
</Branding>
</ConfigProvider>
</RecoilRoot>
</ErrorBoundary>
</body>
</html>
And then i have page.tsx where i am rendering my some component which needed in dashboard screen and also i am checking if user is logged in if not then i am redirecting it to the Login Page
If you are using
material-ui, there is a chance that you have importedLinkfrom material-ui instead of importing fromnext/link. Please check the import line.