Question

我有一个用例。

我的主要React应用程序（容器）正在加载（安装）另一个React子应用程序（模块），该应用程序是使用react-router实现的。

当子应用程序中的路由发生更改时，它也在更改主应用程序URL。

是否可以在不更改URL的情况下更改路线？

我知道仅通过基于状态更改组件，就可以在子应用程序中没有react-router的情况下实现。

但是如何使用react-router达到相同的目的？

应该少用一些头，请帮助您。

Answer 1

如果您想使用react-router而不更改URL，则可以考虑使用MemoryRouter

import { MemoryRouter } from 'react-router';
<MemoryRouter>
     <div>
       <Route path="/first" component={FirstComponent} />
       <Route path="/second" component={SecondComponent} />
     </div>
 </MemoryRouter>

并像往常一样使用它：

this.props.history.push('/second')}

将“ URL”历史记录保存在内存中的路由器（不会读取或写入地址栏）。在测试和非浏览器中有用像React Native这样的环境。

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/MemoryRouter.md

您只需要知道MemoryRouter不会更改浏览器的历史记录，因此您将无法按返回按钮。如果要保留后退按钮，则需要手动进行处理。

this.props.history.goBack() // when a user click on the back button
this.props.history.goForward() // when a user click the forward button

如何使用react-router更改组件而不更改地址栏中的URL？

1 个答案: