Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Router Basics Getting Started with React Router Installing React Router and Declaring a Route

Meher Islam
Meher Islam
9,606 Points
Posted by Meher Islam
Meher Islam
9,606 Points

How do I resolve history is marked required, when value is undefined?

Warning: Failed prop type: The prop history is marked as required in Router, but its value is undefined.     in Router (at router.js:13) printWarning @ warning.js:36 warning @ warning.js:60 checkReactTypeSpec @ checkReactTypeSpec.js:80 validatePropTypes @ ReactElementValidator.js:151 createElement @ ReactElementValidator.js:194 (anonymous) @ router.js:12 webpack_require @ bootstrap 40f0b4e…:555 fn @ bootstrap 40f0b4e…:86 (anonymous) @ index.js:9 webpack_require @ bootstrap 40f0b4e…:555 fn @ bootstrap 40f0b4e…:86 (anonymous) @ bootstrap 40f0b4e…:578 webpack_require @ bootstrap 40f0b4e…:555 (anonymous) @ bootstrap 40f0b4e…:578 (anonymous) @ bootstrap 40f0b4e…:578 Router.js:43 Uncaught TypeError: Cannot read property 'location' of undefined     at new Router (Router.js:43)     at ReactCompositeComponent.js:295     at measureLifeCyclePerf (ReactCompositeComponent.js:75)     at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:294)     at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:280)     at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:188)     at Object.mountComponent (ReactReconciler.js:46)     at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)     at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)     at Object.mountComponent (ReactReconciler.js:46)

Ryan Barone
Ryan Barone
7,079 Points
Ryan Barone
Ryan Barone
7,079 Points

+1, please help

I am getting the same errors.

I have the following code in my index.js file: (note, I have my App component not stored in the components folder so I do not do that path, and I use a Dashboard component instead of teachers, etc. here.)

// Libs import React from 'react'; import { render } from 'react-dom'; import { Router, Route, hashHistory } from 'react-router';

// CSS import './css/style.css';

// Components import App from './App'; import Dashboard from './components/Dasboard';

// Render render(( <Router history={hashHistory}> <Route path="/" component={Dashboard} /> </Router> ), document.getElementById('root'));

4 Answers

Seth Kroger
Seth Kroger
56,413 Points
Seth Kroger
Seth Kroger
56,413 Points

Update: The new React Router 4 Basics course is out now.

Version 4 of React Router changed things around a bit. They made separate top level router elements for the different history types. If you're using version 4 you should be able to replace <Router history={hashHistory}> with <HashRouter> and the appropriate import.

https://reacttraining.com/react-router/#router

Meher Islam
Meher Islam
9,606 Points
Meher Islam
Meher Islam
9,606 Points

Thanks Seth! This was a huge help!

Ryan Barone
Ryan Barone
7,079 Points
Ryan Barone
Ryan Barone
7,079 Points

Perfect! Thanks so much, Seth! It works beautifully now.

I changed my code to the following and it works great now. As a note to others that have this issue, note that the HashRouter is being imported from 'react-router-dom' instead of 'react-router'. Looking at the documentation that Seth linked shows that it is suggested to import 'react-router-dom' via the command line, "npm install react-router-dom." Once I did so, the code below now works great.

// Libraries import React from 'react'; import { render } from 'react-dom'; import { HashRouter as Router, Route } from 'react-router-dom';

// CSS import './css/index.css';

import App from './components/App';

render(( <Router> <Route exact path="/" component={App} /> </Router> ), document.getElementById('root'));

Dom McKellar
Dom McKellar
6,052 Points
Dom McKellar
Dom McKellar
6,052 Points

Thank you very much! They should probably make a note of the changes, seems like to fairly significant differences.

I ran into trouble in the next video as well but eventually got it working with the following code. Note the import of HashRouter from react-router-dom, the nesting (<Router /> can only have on child child node), the use of exact with your root path, and all your <Route />'s should point to a root-relative path.

Checkout react-router's site if you get stuck.

// Libs
import React from 'react';
import { render } from 'react-dom';
import { HashRouter as Router, Route } from 'react-router-dom';

// CSS
import './css/style.css';

// Components
import App from './components/App';
import Home from './components/Home';
import About from './components/About';
import Courses from './components/Courses';
import Teachers from './components/Teachers';

// Render
render((
   <Router>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/teachers" component={Teachers} />
      <Route path="/courses" component={Courses} />
   </Router >
), document.getElementById('root'));
Mark Wallace
Mark Wallace
794 Points
Mark Wallace
Mark Wallace
794 Points

Until this course is updated to teach React Router v4, I suggest this solution.

After downloading the course files, and BEFORE running npm install, open up your package.json file. Add in an entry for react-router to your dependencies, like this:

"dependencies": {
    "react": "^15.3.0",
    "react-dom": "^15.3.0",
    "react-router": "^3.0.0"
  },

This will tell your app to use the last release from react-router version 3. This is much easier than doing a work around for every video in this course.

After you add this entry you can do npm install. NOTE Do not install react-router from the command line as this may change it back to version 4.

The caveat here is that you're learning an old version of react-router but at least you can complete this course without hassle.

Anthony Albertorio
Anthony Albertorio
22,624 Points

Thanks for the info. Will do this course and get the foundation, then go on to do the React Router course on: https://reacttraining.com/online/react-router

hombah
seal-mask
.a{fill-rule:evenodd;}techdegree
hombah
Python Web Development Techdegree Student 16,241 Points
hombah
.a{fill-rule:evenodd;}techdegree
hombah
Python Web Development Techdegree Student 16,241 Points

Thanks Seth and others this really helped. The React project is changing so quickly its hard to keep up, most tutorials I'm watching are already out of date

John Baldwin
John Baldwin
7,969 Points
John Baldwin
John Baldwin
7,969 Points

http://stackoverflow.com/questions/42992911/react-router-only-one-child

**Wrapping your Routes in a <div> tag seems to be a good work around for the issue with the Router only allowing one child element. Much liked rendering a component in the return with React it seems.