当我切换到另一个 URL 时，为什么我的组件不重新呈现？

Question

我使用的是 react-location 库。当我输入 URL 并单击回车时，它可以正常工作，但是当我使用 Link 切换到另一个 URL 时，内容不会改变。我认为这是因为组件没有重新渲染。现在我有一个组件

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;

我想根据当前 url 更改出口内容。还有我的路由器

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

Answer 1

问题是因为我在路由器

的Link外部使用了

当我切换到另一个 URL 时，为什么我的组件不重新呈现？

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

reactjs

react-location