Акция-маршрутизатор-компонент Маршрутизирует все URL-адреса к одному компоненту

Question

Я пытаюсь добавить маршрутизацию к своему простому приложению для ведения блогов / рассказов с помощью response-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

Я использую реагирующий маршрутизатор, а не реагирующий маршрутизатор, но я понял ответ. Мне нужно было добавить "хэш" в локации. Так что это работает так:

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

Спасибо за помощь!

Answer 2

Посмотрите на этот ответ из другого поста, он даст вам представление о том, как он работает: React-Router Stackru Вопрос

Вам нужно использовать <Route handler.../> and <RouteHandler />, Если вы возьмете код у человека, который спрашивает, и используете мои настройки, у вас будет лучшее представление о том, как он работает.