CODEWITHSUNDEEP
reactjsreact-routerhistory
Tim
Tim

Reputation: 2411

React-Router: Why does pushing to history change my url?

I'm trying to utilize createMemoryHistory to move around without changing the url address because my app will be rendered inside an iframe. However, when I push to history, it seems to update my url. Any tips would be greatly appreciated!

//history.js
import createMemoryHistory from "history/createMemoryHistory";
const history = createMemoryHistory();
export default history;

//App.js
import history from './history/history';
...
<Router>
   <Route
      path={'/'}
      render={(props) => <Component {...props}/>}
   />
</Router>

//component.js
...
function handleClick(history) {
    history.push('somePath'); // this updates my url to be url.com/somePath
} 
return (<Button onClick={() => handleClick(this.props.history)}>);

Upvotes: 1

Views: 927

Answers (2)

Shubham Khatri
Shubham Khatri

Reputation: 281606

While making use of MemoryHistory, you should pass the history object on to the Router and use it directly after importing the created history like

App.js

import history from './history/history';
...
<Router history={history}>
   <Route
      path={'/'}
      render={(props) => <Component {...props}/>}
   />
</Router>

component.js

import history from './history/history';
...
function handleClick() {
    history.push('somePath'); // this updates my url to be url.com/somePath
} 
return (<Button onClick={() => handleClick()}>);

Upvotes: 1

Tim
Tim

Reputation: 2411

Fixed the problem, I was importing something incorrectly lol. Still stuck with createMemoryHistory in the end instead of createBrowserHistory

Upvotes: 0

Related Questions