Chapter 13 of Learning React Problem with React Router

#1

My code works perfectly fine with this code.

ReactDOM.render(
<div>
   <App/>
</div>,
destination
);

However when I proceed to set up the React Router.

ReactDOM.render(
  <ReactRouter.Router>
        <ReactRouter.Route path ="/" component={App}>

        </ReactRouter.Route>
  <ReactRouter.Router>,
destination
);

Once I load the document in Google Chrome. Dev Tools gives me the following error.

Uncaught TypeError: Cannot read property ‘getCurrentLocation’ of undefined
at Constructor.createTransitionManager (ReactRouter.min.js:1)
at Constructor.componentWillMount (ReactRouter.min.js:1)
at react.js:6244
at measureLifeCyclePerf (react.js:5971)
at ReactCompositeComponentWrapper.performInitialMount (react.js:6243)
at ReactCompositeComponentWrapper.mountComponent (react.js:6154)
at Object.mountComponent (react.js:13768)
at ReactCompositeComponentWrapper.performInitialMount (react.js:6267)
at ReactCompositeComponentWrapper.mountComponent (react.js:6154)
at Object.mountComponent (react.js:13768)

#2

Does your full code look like the following:

<!DOCTYPE html>
<html>
<head>
  <title>React Test</title>
  <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  <script src="https://npmcdn.com/react-router@2.4.0/umd/ReactRouter.min.js"></script>

  <style>

  </style>
</head>

<body>
  <div id="container"></div>

<script type="text/babel">
  var destination = document.querySelector("#container");

  var App = React.createClass({
    render: function() {
      return (
        <div>
          <h1>Simple SPA</h1>
          <ul className="header">
            <li>Home</li>
            <li>Stuff</li>
            <li>Contact</li>
          </ul>
          <div className="content">

          </div>
        </div>
      )
    }
  });

  ReactDOM.render(
    <ReactRouter.Router>
      <ReactRouter.Route path="/" component={App}>

      </ReactRouter.Route>
    </ReactRouter.Router>,
    destination
  );
</script>
</body>

</html>

I am at the exact step you are, and I don’t see the error that you are seeing.

#3

Thank you; The print edition of your book doesn’t include “react-router@2.4.0/” it was simply
"react-router"

#4

Yikes! That is a bug that needs to be fixed.

#5

It works to change that react-router however I get this error code:

react.js:20478 Warning: You are manually calling a React.PropTypes validation function for the component prop on Route. This is deprecated and will not work in the next major version. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.
printWarning @ react.js:20478
react.js:20478 Warning: You are manually calling a React.PropTypes validation function for the components prop on Route. This is deprecated and will not work in the next major version. You may be seeing this warning due to a third-party PropTypes library.
printWarning @ react.js:20478
react.js:20478 Warning: You are manually calling a React.PropTypes validation function for the getComponent prop on Route. This is deprecated and will not work in the next major version. You may be seeing this warning due to a third-party PropTypes library.
printWarning @ react.js:20478
react.js:20478 Warning: You are manually calling a React.PropTypes validation function for the getComponents prop on Route. This is deprecated and will not work in the next major version. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.

#6

The version or React Router the book talks about has been replaced by a newer version. That’s why you are seeing these warnings. The warnings are OK for now, but you will need to update to a newer version of the Router. I haven’t had a chance to update it yet either, but I’ll do so and post an updated tutorial shortly :slight_smile: