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!

You're not running your router and that's not how you create routes in React-Router. The tutorial in react-router is very straight forward. — Henrik Andersson, Jul 30 '15 at 20:49

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

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.

edited May 23 '17 at 12:29

Community

1
1

answered Jul 30 '15 at 22:23

Hatem Jaber

2,341
2
22
38

score 0 · Accepted Answer · answered Aug 01 '15 at 20:29

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!

react-router-component Routes All URLs to same component

2 Answers2