Reactjs Когда вы нажимаете на навигационные ссылки, это перезагружает всю страницу с помощьюact.lazy - PullRequest
Новая
       4

Reactjs Когда вы нажимаете на навигационные ссылки, это перезагружает всю страницу с помощьюact.lazy

0 голосов
/ 11 апреля 2019

У меня правильно отображается макет, но при нажатии навигация меняет адрес расположения панели браузера, и он работает правильно, единственная проблема заключается в том, что вся страница перезагружается, а не перезагружает конкретное содержимое этой ссылки.

Чтобы решить эту проблему, я удалил функцию 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);

Ожидаемое поведение Expected Behavior

...