react路由器-组件将所有URL路由到同一个组件

Question

我试图添加路由到我的简单博客/短篇小说应用程序的反应-路由器-组件，但无论什么网址被输入，它显示相同的组件。url会出现，但是即使我指定了不同的处理程序，它也总是呈现相同的组件，因此"localhost:3000/“和”localhost:3000/ always“都显示相同的组件，尽管我为"/category”指定了不同的处理程序。该文件如下所示：

​

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

​

您可以查看我的github https://github.com/mrbgit/short-stories/tree/branch上的完整项目，如果您需要更多信息，请告诉我。谢谢!

Answer 1

我用的是反应路由器组件，而不是反应路由器，但我想出了答案。我需要在地点加上“哈希”。所以它是这样工作的：

​

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

​

谢谢你的帮助！

Answer 2

从另一篇文章中看一下这个答案，它会给你一个关于它是如何工作的想法：React-Router StackOverflow Question

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