0

I'm trying to get started with react router in the browser using hash history, I copied this code from the guide for version 3.

import React from "react";
import ReactDOM from "react-dom";
import {  Router,  Route,  Link, hashHistory } from 'react-router';

const App = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/inbox">Inbox</Link></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
})

const About = React.createClass({
  render() {
    return <h3>About</h3>
  }
})

const Inbox = React.createClass({
  render() {
    return (
      <div>
        <h2>Inbox</h2>
        {this.props.children || "Welcome to your Inbox"}
      </div>
    )
  }
})

const Message = React.createClass({
  render() {
    return <h3>Message {this.props.params.id}</h3>
  }
})

var history = hashHistory;

console.log(history);

ReactDOM.render((
  <Router history="{history}">
    <Route path="/" component={App}>
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        <Route path="messages/:id" component={Message} />
      </Route>
    </Route>
  </Router>
),
document.getElementById('app-root'));

When I open the document I get these errors

Warning: Failed prop type: Invalid prop history of type string supplied to Router, expected object.

I logged history before that and it looks like an object

enter image description here

Uncaught Error: You have provided a history object created with history v4.x or v2.x and earlier. This version of React Router is only compatible with v3 history objects. Please change to history v3.x.

I have installed react-router@3 along with history@3, I can confirm

+-- react-router@3.0.2 extraneous

I can't find history in the list but if I go to the directory I can see the package.json

"version": "3.3.0"

1 Answer 1

2

Remove "" sign from history

<Router history={history}>
1
  • facepalmmmmmmmmmmmmmmmmmm
    – php_nub_qq
    Mar 14, 2017 at 9:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.