React Router: how to navigate programatically outside of a component?

Question

I want to navigate to path /hello and try the following:

import { browserHistory } from 'react-router'
browserHistory.push('/hello')

But it only changes the browser's URL to /hello without actually navigating to that page. Inside of a component, this method works:

this.props.history.push('/hello')

This is how I set up my router:

// Configure history for react-router
const browserHistory = useRouterHistory(createBrowserHistory)({
  basename: __BASENAME__
})

// Create redux store and sync with react-router-redux. We have installed the
// react-router-redux reducer under the key "router" in src/routes/index.js,
// so we need to provide a custom `selectLocationState` to inform
// react-router-redux of its location.
const initialState = window.__INITIAL_STATE__
const store = configureStore(initialState, browserHistory)
const history = syncHistoryWithStore(browserHistory, store, {
  selectLocationState: (state) => state.router
})

// Now that we have the Redux store, we can create our routes. We provide
// the store to the route definitions so that routes have access to it for
// hooks such as `onEnter`.
const routes = makeRoutes(store)

// Now that redux and react-router have been configured, we can render the
// React application to the DOM!
ReactDOM.render(
  <Root history={history} routes={routes} store={store} />,
  document.getElementById('root')
)

References:

Maximus S · Accepted Answer · 2016-04-18 16:21:03Z

2

When I setup the browserHistory, I store it inside a global namespace:

const history = syncHistoryWithStore(browserHistory, store, {
  selectLocationState: (state) => state.router
})
window.routerHistory = history

Then I can navigate outside of a component like below:

window.routerHistory.push('/')

answered Apr 18, 2016 at 16:21

Maximus S

11.2k20 gold badges82 silver badges165 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Router: how to navigate programatically outside of a component?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related