react-router-component将所有URL路由到同一组件

Question

我正在尝试使用react-router-component将路由添加到我的简单博客/短故事应用中，但是无论输入什么URL，它都显示相同的组件。 尽管出现了url，但是即使我指定了不同的处理程序，它也始终呈现相同的组件，因此即使我为“”指定了不同的处理程序，“ localhost：3000 /”和“ localhost：3000 / 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

看一下另一篇文章中的答案，它将使您了解其工作原理： React-Router StackOverflow问题

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

Answer 2

我使用的是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) 

感谢您的所有帮助！