Question

我正在尝试使用react-router-component将路由添加到我的简单博客/短篇小说应用程序中，但无论输入的是什么网址，它都会显示相同的组件。网址出现，但即使我指定了不同的处理程序，它仍然是呈现的相同组件，因此＆＃34; localhost：3000 /＆＃34;和＆＃34; localhost：3000 / category＆＃34;即使我为＆＃34; / category＆＃34;指定了不同的处理程序，它们都显示相同的组件。该文件如下所示：

＆＃13;

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

＆＃13;

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

Answer 1

从另一篇文章看一下这个答案，它会让你知道它是如何运作的：React-Router StackOverflow Question

您需要使用ALTER TABLE `REGISTER` ADD CONSTRAINT `SectionNumber` FOREIGN KEY (`SectionNumber`) REFERENCES `REGISTRATION_SYSTEM`.`SECTION`(`SectionNumber`) ON DELETE RESTRICT ON UPDATE RESTRICT;。如果您从询问和使用我的调整的人那里获取代码，您将更好地了解它的工作原理。

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)

感谢您的帮助！

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

2 个答案: