更改路线时无法卸载组件

时间:2020-07-22 07:01:00

标签: reactjs react-router-dom mobx-react

我有具有多个路线的react应用。有2条路线采用路径数组。当有一个应用程序正常工作时,但是当有两个路由都具有路径数组时,某些组件将不会卸载。我正在使用mobx传递数据。当我同时通过 createAttachment '/ manage / attachment /:id 打开 AttachmentForm 时em>”,然后使用浏览器后退按钮返回,表单组件仍将显示在其他组件的顶部

import { Container } from 'semantic-ui-react';
import NavBar from '../../features/nav/NavBar';
import { observer } from 'mobx-react-lite';
import { Route, withRouter, RouteComponentProps } from 'react-router-dom';
import HomePage from '../../features/home/HomePage';
import AttachmentDashboard from '../../features/attachments/dashboard/AttachmentDashboard';
import AttachmentForm from '../../features/attachments/form/AttachmentForm';
import AttachmentDetails from '../../features/attachments/details/AttachmentDetails';

import AddressDashboard from '../../features/addresses/dashboard/AddressDashboard';
import AddressForm from '../../features/addresses/form/AddressForm';
import AddressDetails from '../../features/addresses/details/AddressDetails';
const App: React.FC<RouteComponentProps> = ({ location }) => {

  return (
    <Fragment>
      <Route exact path='/' component={HomePage} />
      <Route
        path={'/(.+)'}
        render={() => (
          <Fragment>
            <NavBar />
            <Container style={{ marginTop: '7em' }}>
              <Route exact path='/attachments' component={AttachmentDashboard} />
              <Route exact path='/attachments/:id' component={AttachmentDetails} />
              <Route
                key={location.key}
                exact path={['/createAttachment', '/manage/attachment/:id']}
                component={AttachmentForm}
              />
              <Route exact path='/addresses' component={AddressDashboard} />
              <Route exact path='/addresses/:id' component={AddressDetails} />
              <Route
                key={location.key}
                exact path={['/createAddress', '/manage/address/:id']}
                component={AddressForm}
              />
            </Container>
          </Fragment>
        )}
      />
    </Fragment>
  );
};

export default withRouter(observer(App));

0 个答案:

没有答案