CODEWITHSUNDEEP
reactjsreact-router
kenlck
kenlck

Reputation: 23

Router.create in react-router v1.0.0

What is the equivalent of Router.create (react-router v0.13) in react-router v1.0?

var router = Router.create({
  routes: routes,
  location: null // Router.HistoryLocation
});

I want to create a reference for the router to be used outside of the DOM.

router.transitionTo('app');

The code snippet above is the ones in v0.13. Wondering if anyone knows how to write them in react-router v1.0.

I have gone through the documentation of react-router, and I had found the createRoutes function. I had no idea how to use it. Please help me on this.

Upvotes: 2

Views: 305

Answers (3)

nanobar
nanobar

Reputation: 66425

In v1 Router is a component, the routes are children, and history is a prop:

import { createHistory } from 'history'
import { Router } from 'react-router'

<Router history={createHistory()}>{routes}</Router>

Edit: now I recommend you still install the history module, but import 'browserHistory' from react-router which provides a thin layer on top of it

In your top level component you can access props.history.pushState(state, pathname, query) (further down you'll have to pass it through or use the mixin with createClass or something):

this.props.history.pushState(null, 'contact');

Upvotes: 1

taion
taion

Reputation: 2837

React Router as of v1.0 is now more modular than that. Things like navigation are functions of a "history" object rather than the router itself, which only handles routing.

To do the equivalent with React Router v1.0, you would instantiate the history object outside the router, then do whatever you want with it. There's more detailed documentation available at the guide for navigating outside of components: https://github.com/rackt/react-router/blob/master/docs/guides/advanced/NavigatingOutsideOfComponents.md.

Upvotes: 1

Jonny Buchanan
Jonny Buchanan

Reputation: 62813

You use a history object for this in v1.0.0 - if you don't pass Router one, it will create one for you.

See Getting Started for how to create a history object and Navigation for how to use it to perform navigation.

Upvotes: 0

Related Questions