0

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!

4

2 回答 2

0

我使用的是 react-router-component，而不是 react-router，但我找到了答案。我需要向位置添加“哈希”。所以它是这样工作的：

'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)

感谢所有的帮助！

于 2015-08-01T20:29:53.487 回答
0

从另一篇文章中查看这个答案，它会让您了解它是如何工作的：React-Router StackOverflow Question

你需要使用<Route handler.../> and <RouteHandler />. 如果您从询问的人那里获取代码并使用我的调整，您将更好地了解它是如何工作的。

于 2015-07-30T22:23:42.070 回答