I am having one use case.
My main react application (container) is loading (mounting) another react child application (module), which is implemented using react-router
.
When the route changes in the child application, it is also changing the main application URL.
Is there any way to change the route without changing URL?
I know this is possible without react-router
in the child application, by just changing component based on state.
But how can we achieve the same with react-router
?
It should be kind of head less application, please help your thoughts.
If you want to use react-router
without changing the URL you may consider using a MemoryRouter
import { MemoryRouter } from 'react-router';
<MemoryRouter>
<div>
<Route path="/first" component={FirstComponent} />
<Route path="/second" component={SecondComponent} />
</div>
</MemoryRouter>
And use it like usual:
this.props.history.push('/second')}
A router that keeps the history of your "URL" in memory (does not read or write to the address bar). Useful in tests and non-browser environments like React Native.
You just need to be aware that MemoryRouter
does not change the browser history, thus you won't be able to press the back button. If you want to keep a back button, you will need to handle it manually.
this.props.history.goBack() // when a user click on the back button
this.props.history.goForward() // when a user click the forward button
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.