reactjsreact-location

Why don't my components rerender when I switch to another URL?


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();

Solution

  • The problem was because i used Link outside of Router