1

I am trying to set up routing for a simple one page application. When I say one page, I mean that all my components will be rendered at once. My aim with routing was to use it for link to anchor (clicking on the nav will scroll you to the correct section/component).

index.js

No compiling errors but nothing gets rendered and I'm getting the following in my browser console.

browser console

App.js updated

routes.js

I've reverted my App.js to its initial form when it was only rendering the components and working fine. Instead, I've created a separate file, routes.js to hold my routing. If this is correct, how can I get both rendered by my index.js. Or is this not the way things should work?

Manu
  • 1,632
  • 3
  • 17
  • 23
  • You can try taking a look at this: http://stackoverflow.com/questions/40280369/use-anchors-with-react-router – pinturic Jan 18 '17 at 16:27
  • @pinturic that leads to an already working environment. At the moment I am trying to get my page render my components using routing. Only afterwards I'll look into the anchor linking issue. – Manu Jan 18 '17 at 16:32

1 Answers1

3

Router is not the default export of react-router. This is the correct require:

const Router = require('react-router').Router;

You're also not supposed to return a Router from a render() method. A <Router> must be passed directly to ReactDOM.render().

Stefan Dragnev
  • 14,143
  • 6
  • 48
  • 52
  • Using a root Route: ` the other routes go here , and in your App.render(): `return
    {this.props.children}
    `. Something like this should be enough.     – Stefan Dragnev Jan 18 '17 at 16:41
  • Will I have something like ReactDOM.render({routes}, document.getElementById('app')); in my index.js? – Manu Jan 18 '17 at 16:52