react-router: {history} undefined

I am trying to follow the examples from 1.0.0-beta2 or even the readme.md from master. If I do (in browser)

import {history} from 'react-router/lib/BrowserHistory';

React.render((
    <Router history={history}>
...

I get Uncaught Error: Invariant Violation: Server-side <Router>s need location, branch, params, and components props. Try using Router.run to get all the props you need Turns out that history is undefined this way. Even when I do

import BrowserHistory from 'react-router/lib/BrowserHistory';
React.render((
    <Router history={BrowserHistory}>
...

as other examples suggest, it doesn’t work. I get Warning: Failed propType: Invalid prophistorysupplied toRouter, expected instance ofHistory. Uncaught Error: Invariant Violation: A <Router> needs a valid Location

The only way I got it to work was with <Router history={new BrowserHistory()}> but this is definitely not in the examples.

Am I doing something wrong or are the docs outdated?

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 42 (10 by maintainers)

Commits related to this issue

Attempting to integrate react-router-redux. Running into https://github.com/rackt/react-router/issues/1455 — committed to Dean177/git-watch by Dean177 9 years ago

Most upvoted comments

@knowbody

It’s gone in 1.0.0-beta4.

Now you get hash history by default (no need to specify it). If you want the pushstate history, do this:

import { createHistory } from 'history'; // you need to install this package
let history = createHistory();

gaearon on Sep 7, 2015

Please update the readme file!

fwon on Jan 24, 2016

In most git repos, master is the latest version of the code, including any in progress, unreleased bits. It’s generally where all active development is happening, so the code there may be unstable. But you come here to see what is being developed, that is the whole point of Github. We, unfortunately, do not have a separate website for the project. If we did, I think this would end up being a lot clearer. I want to get that going shortly, since we get daily issues related to mismatched docs.

timdorr on Jan 25, 2016

Hey @knowbody Trying to get history into my react-router set-up to prevent the links outside of history errors, is this along the right lines if I’m not writing this the ES6 way?

var history = require(‘history/lib/createBrowserHistory’).createHistory;

and then…

React.render((
    <Router history="{history}">
        <Route path="/"     component={HomeController}/>
        <Route path="about" component={AboutController}/>
        <Route path="blog"  component={BlogController}/>
        <Route path="work"  component={WorkController}/>
        <Route path="*"     component={NotFoundController}/>
    </Router>
), site);

I’ve done as much reading around as I can but this issue is probably the closest I’ve come to finding a solution.

davegreenwp on Sep 29, 2015

@BerkeleyTrue, per my previous comment this issue still exists in beta3.

The beta3 docs show:

import { Router, Route } from 'react-router';
import BrowserHistory from 'react-router/lib/BrowserHistory';

React.render((
  <Router history={BrowserHistory}>
    <Route path="about" component={About}/>
    <Route path="dashboard" component={Dashboard}/>
  </Router>
), document.body);

But in reality (in beta 3), we need to do this:

import { Router, Route } from 'react-router';
import BrowserHistory from 'react-router/lib/BrowserHistory';

React.render((
  <Router history={new BrowserHistory()}>
    <Route path="about" component={About}/>
    <Route path="dashboard" component={Dashboard}/>
  </Router>
), document.body);

This issue should not be closed.

aldendaniels on Jul 17, 2015