javascript - How to change component with react-router without changing URL in address bar? - Stack Overflow

admin管理员组

文章数量:1430995

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 ponent 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.

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 ponent 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.

• javascript
• reactjs
• react-router

Share Improve this question Follow edited Oct 4, 2018 at 9:05 R.Duteil 1,23711 gold badge1414 silver badges2828 bronze badges asked Oct 4, 2018 at 6:08 user7175350user7175350 10122 silver badges99 bronze badges 1

• Please, explain your case further. stackoverflow./help/mcve would help to understand your case better. You likely need memory router or custom router, depending on your case – Estus Flask Commented Oct 4, 2018 at 6:40

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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" ponent={FirstComponent} />
       <Route path="/second" ponent={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.

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

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

本文标签： javascriptHow to change component with reactrouter without changing URL in address barStack Overflow