Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript React Router Basics Getting Started with React Router Declaring Multiple Routes

React-Router - HashRouter Does Not Work with 2+ Routes

In version 4.0 of 'react-router' they changed up the way hash routes work.

Now we import HashRouter from 'react-router-dom' and use <HashRouter> to do hash routing.

Currently I have a

<HashRouter>
      <Route path="/" component={Home}/>
</HashRouter>

But when you add 2 or more routes with <HashRouter> it throws an error saying you can only have 1 per Router. I'm confused as to how I should made more <Route> to my Router.

<HashRouter>
      <Route path="/" component={Home} />
      <Route path="about" component={About} />
      <Route path="teachers" component={Teachers} />
      <Route path="courses" component={Courses} />
</HashRouter>

According to the React Router tutorial, I should be placing my <Route> inside of the Router.

Though, I'm getting "A <Router> may have only one child element"

According to the React Router - HashRouting API page I need to specify the entire component? I'm not sure.

3 Answers

Just Tip. I had problem with rendering components. I needed to add "exact" parameter like this

<Route exact path="/" component={Home} />

Kristóf Dombi
Kristóf Dombi
28,047 Points

As I'm writing this on the 5th of April 2017. This worked for me: Add / before the path value. Here is how it worked for me:

import { HashRouter as Router, Route } from 'react-router-dom';

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((
  <Router>
    <div>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/courses" component={Courses} />
      <Route path="/teachers" component={Teachers} />
    </div>
  </Router>
), document.getElementById('root'));
Seth Kroger
Seth Kroger
56,407 Points

According to the docs the single child is a usually a <div> and you put the <Route>s inside it:

<HashRouter>
   <div>
      <Route path="/" component={Home} />
      <Route path="about" component={About} />
      <Route path="teachers" component={Teachers} />
      <Route path="courses" component={Courses} />
   </div>
</HashRouter>