0

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詳細情報が必要な場合はお知らせください。ありがとう！

4

2 に答える 2

0

私はreact-routerではなくreact-router-componentを使用していますが、答えはわかりました。ロケーションに「ハッシュ」を追加する必要がありました。したがって、次のように機能します。

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

助けてくれてありがとう！

于 2015-08-01T20:29:53.487 に答える
0

別の投稿からこの回答を見てください。それがどのように機能するかについてのアイデアが得られます: React-Router StackOverflow Question

を使用する必要があります<Route handler.../> and <RouteHandler />。質問者からコードを受け取り、私の調整を使用すると、それがどのように機能するかをよりよく理解できます。

于 2015-07-30T22:23:42.070 に答える