react-router-component Routes All URLs to same component

Question

I am trying to add routing to my simple blogging/short stories app with react-router-component, but no matter what url is entered it shows the same component. The url appears, but it's always the same component that is rendered even though I specified a different handler, so "localhost:3000/" and "localhost:3000/category" both show the same component even though I specified a different handler for "/category". The file looks like this:

 'use strict'; var React = require('react'); var Router = require('react-router-component'); var Locations = Router.Locations; var Location = Router.Location; var MainPage = require('./components/views/main-page.jsx'); var CategoryPage = require('./components/views/category-page.jsx'); var App = React.createClass({ render: function () { return ( <Locations> <Location path="/" handler={MainPage} /> <Location path="/category" handler={CategoryPage} /> </Locations> ) } }) React.render(<App />, document.body) 

You can view the full project on my github https://github.com/mrbgit/short-stories/tree/branch Let me know if you need more info. Thanks!

Answer 1

Take a look at this answer from another post, it will give you an idea of how it works: React-Router StackOverflow Question

You need to use <Route handler.../> and <RouteHandler /> . If you take the code from the person asking and use my adjustments, you will have a better idea of how it works.

Answer 2

I'm using react-router-component, not react-router, but I figured out the answer. I needed to add "hash" to the locations. So it works like this:

 'use strict'; var React = require('react'); var Router = require('react-router-component'); var Locations = Router.Locations; var Location = Router.Location; var MainPage = require('./components/views/main-page.jsx'); var CategoryPage = require('./components/views/category-page.jsx'); var App = React.createClass({ render: function () { return ( <Locations hash> <Location path="/" handler={MainPage} /> <Location path="/category" handler={CategoryPage} /> </Locations> ) } }) React.render(<App />, document.body) 

Thanks for all the help!