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

【问题标题】：react-router-component Routes All URLs to same componentreact-router-component 将所有 URL 路由到同一组件
【发布时间】：2015-07-30 20:44:02
【问题描述】：

我正在尝试使用 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 上查看完整项目，如果您需要更多信息，请告诉我。谢谢！

【问题讨论】：

你没有运行你的路由器，这不是你在 React-Router 中创建路由的方式。 react-router 中的教程非常简单。

标签： javascript reactjs react-router-component

【解决方案1】：

看看另一个帖子的这个答案，它会让你了解它是如何工作的：React-Router StackOverflow Question

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

【讨论】：

【解决方案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)

感谢大家的帮助！

【讨论】：