1

ここ数日、深くネストされたコンポーネントのルーティングで直面している問題を解決しようとしています。私はreactjs v14.6とreact-router v2.0をbrowserHistoryで使用しています。hashHistory に置き換えて、非推奨の履歴 mixin を使用すると、期待どおりに動作します。

反応ルーターを使用して、レンダリングに成功し、デフォルトのホームページからプロファイル ページにルーティングできました。ホーム コンポーネントとプロファイル コンポーネントの両方でレンダリングされるナビゲーション バーとして、searchGithub という子コンポーネントがあります。profile/:usernameプロファイル コンポーネント/ページに正常にルーティングされるクエリ パラメータを取得する基本的な検索です。高次関数の履歴ミキシングの交換に関するドキュメントに従いました

プロファイル ページで検索コンポーネントを使用しようとすると、問題が発生します。/profileURLに追加を追加します。たとえば、ホームページからは適切にルーティングされますhttp://localhost:3000/profile/tylerが、プロファイルページでユーザー名を検索しようとすると、代わりにURLがhttp://localhost:3000/profile/profile/tylerエラーの原因になりますWarning: [react-router] Location "/profile/profile/tyler" did not match any routes

完全なプロジェクトを表示するための github リポジトリへのリンクは次のとおりです。

問題は browserHistory や server.js ファイルにあるのではなく、routes ファイルまたはコンポーネントの 1 つに問題があると思います。上記のリンクを自由にチェックして、完全なプロジェクトを取得し、必要に応じて依存関係をインストールしてください。場所記述子を渡さないことに関係していると思いますが、これも渡す必要がある3番目の引数かどうかはわかりませんthis.context.router.push()

ここに私の /App.jsx コンポーネントがあります

var React = require('react');
var ReactDom = require('react-dom');
var Router = require('react-router').Router;
var routes = require('./config/routes');
var browserHistory = require('react-router').browserHistory;

ReactDom.render(
  <Router history={browserHistory} routes={routes} />,
  document.getElementById('app')
);

ここに私の /routes.jsx があります

var React = require('react');
var Main = require('../components/Main');
var Home = require('../components/Home');
var Profile = require('../components/Profile');
var Router = require('react-router');
var Route = Router.Route;
var IndexRoute = Router.IndexRoute;

module.exports = (
  <Route path="/" component={Main}>
    <Route path="profile/:username" component={Profile} />
    <IndexRoute component={Home} />
  </Route>
);

ここに私の /SearchGithub.jsx があります

var React = require('react');
var Router = require('react-router');

var SearchGithub = React.createClass({
  contextTypes: {
    router: React.PropTypes.object.isRequired,
  },

  getRef: function(ref) {
    this.usernameRef = ref;
  },

  handleSubmit: function() {
    var username = this.usernameRef.value;
    this.usernameRef.value = '';
    this.context.router.push('profile/' + username, null);
  },

  render: function() {
    return (
      <div className="col-sm-12">
        <form onSubmit={this.handleSubmit}>
          <div className="form-group col-sm-7">
            <input type="text" className="form-control" ref={this.getRef} />
          </div>
          <div className="form-group col-sm-5">
            <button type="submit" className="btn btn-block btn-primary">Search Github</button>
          </div>
        </form>
      </div>
    );
  },
});

module.exports = SearchGithub;

ここに私の /main.jsx があります

var React = require('react');
var SearchGithub = require('./SearchGithub');

var Main = React.createClass({
  render: function() {
    return (
      <div className="main-container">
        <nav className="navbar navbar-default" role="navigation">
          <div className="col-sm-7 col-sm-offset-2" style={{ marginTop: 15 }}>
            <SearchGithub />
          </div>
        </nav>
        <div className="container">
          {this.props.children}
        </div>
      </div>
    );
  },
});

module.exports = Main;

私はrouter.push({ pathname, query, state }) // new "location descriptor"自分が間違っていることを理解しようとして髪を引っ張っていたので、誰かが助けてくれることを願っています。それが実際に問題の原因である場合、ロケーション記述子をどのように実装するかにも興味があります

4

1 に答える 1

3

discordでお世話になりましたが、こちらにも載せておきます。

現在、react-router + history は、相対的な遷移ではうまく連携しません。ここで関連する github の問題を参照してください - https://github.com/rackt/history/issues/135。

また、ルーターのみにパス名を渡すか、単一のオブジェクトであるロケーション記述子を渡す必要があります。

 this.context.router.push('/profile/' + username);

また

this.context.router.push({ pathname: '/profile/' + username });

先頭に注意してください/

于 2016-02-05T22:51:27.343 に答える