4

onEnterユーザーがハンドラー内で新しいルート/パスをヒットしたときに、以前のルート/パスを読み取る方法を見つけようとしています。

次のような構造の React Router があります。

    <Router history={history}>
      <div className="index">
        <Route
          path="/"
          component={ComposedAppComponent}
          onEnter={this.onEnterHandler.bind(this)}
        >
          <Route name="streamKey" path=":streamKey">
            <Route name="articleUri" path="(**)" />
          </Route>
        </Route>
      </div>
    </Router>

関数 はonEnterHandler次のようになります。

  onEnterHandler(nextRouteState) {
    const { streamKey, splat } = nextRouteState.params;

    const nextPath = `/${streamKey}/${splat}`;
    const prevPath = // HOW DO I GET THE PREVIOUS PATH?
  }

ユーザーが通っていた以前のルート パスを読み取る方法が見つからないようです...新しいルートと以前のルートを比較する必要があります。これにアプローチする方法についての意見は大歓迎です。:)

乾杯！

4

1 に答える 1

11

ユーザーがアドレスバーから新しいパスに移動したり、react-router のようなものを使用したりするときに、以前のパスを取得しようとしていますthis.context.router.push()か?

ナビゲーションが を使用している場合、react-routerこれらの簡単な方法で探しているものが得られる可能性があります。

1.パスprevPathを使用してquery-params

ナビゲーションは次のようになります。

`<Link to="/next" query={{ prevPath: this.props.location.pathname }}> Your Next path</Link>`

onEnterHandlerこれで、これを使用してメソッド の prevPath 値を取得できます。nextState.location.query.prevPath

  • 短所: クエリはアドレス バーに表示されます。
  • 長所：prevPathユーザーがアドレスバーをナビゲートしているとき（ダイレクトパスアクセス）にアクセスできます。

2. パスprevPath使用状態

ナビゲーションは次のようになります。

`<Link to="/next" state={{ prevPath: this.props.location.pathname }}> Your Next path</Link>`

onEnterHandlerこれで、これを使用してメソッド の prevPath 値を取得できます。nextState.location.state.prevPath

  • 短所: クエリはアドレス バーに表示されません。
  • 長所prevPath:ユーザーがアドレス バー (ダイレクト パス アクセス) をナビゲートしているときは、取得できません。

さらに、これらの方法の短所は、prevPath各 Link コンポーネントに値を割り当てる必要があることです。Link コンポーネントのラッパー コンポーネントを作成すると、この問題は解決します。

于 2016-04-16T11:08:33.790 に答える