I using react-location library. When I typing URL and click enter it works correctly but when I switch to another URL using Link the content doesn't change. I think its because component is not rerenders. Now i have a component
const Account = () => {
return (
<div className={ styles.account__wrapper }>
<div className={ styles.account }>
<div className={ styles.account__topbar }>
<div className={ styles.navbar__name_wrapper }>
<h3 className={ styles.navbar__name }>Viktor Volokhan</h3>
<p className={ styles.navbar__subtitle }>Your personal account</p>
</div>
<div className={ styles.navbar__exit }>Sign out</div>
</div>
<div className={ styles.account__content }>
<div className={ styles.account__navbar }>
<ul>
<li className={ styles.menu__item }>
<Link to="/account/profile">Account</Link>
</li>
<li className={ styles.menu__item }>
<Link to="/account/currentorders">Current rents</Link>
</li>
<li className={ styles.menu__item }>
<Link to="/account/expiredorders">Expired rents</Link>
</li>
</ul>
</div>
<div className={ styles.account__info }>
<Router routes={ accountRoutes } location={ location1 }>
<Outlet />
</Router>
</div>
</div>
</div>
</div>
);
};
export default Account;
I want to change content of outlet depending of current url. Also my router
import { Route, ReactLocation, MakeGenerics } from 'react-location';
import React from 'react';
export const accountRoutes: Route[] = [
{
path: '/account/profile',
element: () => import('../components/account/AccountData').then(mod => <mod.default/>),
},
{
path: '/account/currentorders',
element: () => import('../components/account/CurrentOrders').then(mod => <mod.default/>),
},
{
path: '/account/expiredorders',
element: () => import('../components/account/ExpiredOrders').then(mod => <mod.default/>),
},
];
export type LocationGenerics = MakeGenerics<{
LoaderData: {};
}>;
export const location1 = new ReactLocation();
The problem was because i used Link outside of Router