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) 

感謝您的所有幫助！