我有具有多个路线的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));