Reactjs单击导航链接时，将使用react.lazy重新加载整个页面

Question

我可以正确显示布局，但是单击导航时也会更改浏览器栏的位置地址，并且可以正常工作，唯一的问题是重新加载整个页面而不是重新加载该链接的特定内容。

要解决此问题，我删除了lazy();一个导入其他页面的函数。 效果很好，但是在我的项目中，我确实需要这个lazy()。

除此之外，我尝试添加Navbar.tsx。但是除非手动重新加载页面，否则内容不会更改。

这是我的route.tsx文件。

import React, { Component, lazy, Suspense } from 'react';
import { Route, Switch, RouteProps, Redirect } from 'react-router-dom';
import PrivateRoute from './components/route/private-route';
import { Row, Col } from 'antd';
import { CurrentUserConsumer } from './contexts/current-user-context';
import LoadingSpinner from './components/spinner/LoadingSpinner';
import Access from './components/Access';
import { UserProfileProvider } from './contexts/user-profile-context';

const LoginPage = lazy(() => import('./pages/login'));
const DashboardPage = lazy(() => import('./pages/dashboard'));
const UserList = lazy(() => import('./pages/users'));
const LanguageList = lazy(() => import('./pages/languages'));
class AppRouter extends Component {
render() {
const LoginContainer = () => (
<div className="container">
<Route exact path="/" render={() => <Redirect to="/login" />} />
<Route path="/login" render={() => <LoginPage />} />
</div>
);
const DefaultContainer = () => (
<div className="container">
<Row className="App-wrapper" type="flex">
<Col span={24}>
<Navbar />
</Col>
<CurrentUserConsumer>
{userContext => {
const isLoggedIn = userContext && userContext.isLoggedIn ? true : false;
return (
<Col span={24} className="nav-column">
<PrivateRoute exact path="/" isLoggedIn={isLoggedIn} component={DashboardPage} />
<Access permission="Dashboard" privileges={['Add', 'Edit', 'Delete']}>
<PrivateRoute path="/dashboard" isLoggedIn={isLoggedIn} component={DashboardPage} />
</Access>
<Access permission="Users" privileges={['Add', 'Edit', 'Delete']}>
<PrivateRoute exact path="/users" isLoggedIn={isLoggedIn} component={UserList} />
</Access>
<Access permission="Users" privileges={['Add']}>
<PrivateRoute exact path="/users/add" isLoggedIn={isLoggedIn} component={AddEditUser} />
</Access>
<Access permission="Users" privileges={['Edit']}>
<PrivateRoute exact path="/users/:id([0-9]+-[A-Z])" isLoggedIn={isLoggedIn} component={AddEditUser} />
</Access>
<Access permission="Clients" privileges={['Add', 'Edit', 'Delete']}>
<PrivateRoute exact path="/clients" isLoggedIn={isLoggedIn} component={ClientList} />
</Access>
<Access permission="Clients" privileges={['Add']}>
<PrivateRoute exact path="/add-client" isLoggedIn={isLoggedIn} component={ClientWizard} />
</Access>
<Access permission="Languages" privileges={['Add', 'Edit', 'Delete']}>
<PrivateRoute exact path="/languages" isLoggedIn={isLoggedIn} component={LanguageList} />
</Access>
</Col>
);
}}
</CurrentUserConsumer>
</Row>
</div>
);
return (
<Suspense fallback={<LoadingSpinner />}>
<Switch>
<Route exact path="/(login)" component={LoginContainer} />
<Route component={DefaultContainer} />
</Switch>
</Suspense>
);
}
}

export default AppRouter;

下面是我的Navbar.tsx

import React, { Component, Fragment } from 'react';
import { Menu, Icon, Layout } from 'antd';
import { ClickParam } from 'antd/lib/menu';
import { withRouter, Link } from 'react-router-dom';
import { RouteComponentProps } from 'react-router';
const Header = Layout;
class Navbar extends Component<RouteComponentProps> {
getSelectedKeys = () => {
const path = this.props.history.location.pathname;
const keys = ['/dashboard', '/users', '/roles', '/clients', '/languages', '/appointments', '/tools'];
let selectedKeys: string[] = [];
keys.forEach(key => {
if (path.includes(key)) {
selectedKeys.push(key);
return;
}
});
return selectedKeys;
};

handleClick = (e: ClickParam, userContext: ICurrentUserContext | null) => {
if (e.key === '/logout') {
if (userContext) userContext.onLogout();
this.props.history.push('/login');
} else {
this.props.history.push(e.key);
}
};

render() {
const SubMenu = Menu.SubMenu;
return (
<div>
<CurrentUserConsumer>
{userContext => (
<Fragment>
<Layout>
<Header className={styles['header-item']}>
<Menu
onClick={e => this.handleClick(e, userContext)}
selectedKeys={this.getSelectedKeys()}
theme="dark"
mode="horizontal"
className={styles['menu-container']}
>
<Menu.Item key="/" className={styles['header-logo']}>
<h1 className={styles['header-logo-item']}>
Cultura<span className={styles['header-logo-text']}>Link</span>
</h1>
</Menu.Item>

{allowed('Dashboard', ['Add', 'Edit', 'Delete'], userContext) ? (
<Menu.Item key="/dashboard" className={styles['menu-item-dashboard']}>
<Link to="/dashboard">
  Dashboard
</Link>
</Menu.Item>
) : null}
{allowed('Users', ['Add', 'Edit', 'Delete'], userContext) ? (
<Menu.Item key="/users">
<Link to="/users">
Users
</Link>
</Menu.Item>
) : null}
{allowed('Languages', ['Add', 'Edit', 'Delete'], userContext) ? (
<Menu.Item key="/languages">
<Link to="/languages">Languages</Link>
</Menu.Item>
) : null}
      </Menu>
</Header>
</Layout>
</Fragment>
)}
</CurrentUserConsumer>
</div>
);
}
}
export default withRouter(Navbar);

预期行为