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

Question

我正在尝试使用 react-router-component 向我的简单 blogging/short 故事应用程序添加路由，但无论输入什么 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

看看另一个 post 的回答，它会让您了解它是如何工作的：

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

Answer 2

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

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

感谢大家的帮助！

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

react-router-component Routes All URLs to same component

javascript

reactjs

react-router-component