Как поменять компонент с реакции-роутером, не меняя URL в адресной строке?

Question

У меня один вариант использования.

Мое основное приложение реакции (контейнер) загружает (монтирует) другое дочернее приложение реакции (модуль), которое реализуется с использованием 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