web-dev-qa-db-ja.com

React Router dom v4のコンポーネントでパラメータを取得する方法は？

私はこのコードを持っています：

<BrowserRouter>
   <Route  path="/(:filter)?" component={App} />
</BrowserRouter>

ルートのフィルターパラメーターまたは ''は、以前のリアクションルーターバージョンに基づいて、アプリコンポーネントの小道具にあると仮定していますか？

これは私のアプリ上の私のコードです：

const App = ({params}) => {
    return ( // destructure params on props
      <div>
        <AddTodo />
        <VisibleTodoList 
            filter={params.filter || 'all'} // i want to git filter param or assign 'all' on root 
        />
        <Footer />
      </div>
    );
}

This.props.match.paramsをコンソールに記録しましたが、何もありませんか？助けて？

javascriptreactjsreact-routerreact-router-v4react-router-dom
7
gpbaculio

Egghead.ioのReduxチュートリアル に従っていると仮定します。サンプルコードでは、そのビデオシリーズで定義されているものを使用しているようです。また、React Router v4を統合しようとしてこの部分で立ち往生しましたが、最終的にはあなたが試したものから遠くない実用的なソリューションを見つけました。

NOTE️注：ここで確認することの1つは、現在のバージョンのreact-router-dom（4.1.1この記事の執筆時点）。 v4のアルファ版およびベータ版の一部で、paramsのオプションのフィルターに問題がありました。

最初に、ここでの答えのいくつかは間違っており、実際にcanReact Router v4なしで正規表現、複数のパス、古風な構文、または<Switch>コンポーネント。

<BrowserRouter>
  <Route  path="/:filter?" component={App} />
</BrowserRouter>

第二に、他の人が指摘したように、React Router v4はルートハンドラコンポーネントでparamsを公開しませんが、代わりに使用するmatch propを提供します。

const App = ({ match }) => {
    return (
      <div>
        <AddTodo />
        <VisibleTodoList filter={match.params.filter || 'all'} />
        <Footer />
      </div>
    )
}

ここから、コンテンツを現在のルートと同期させる2つの方法があります。mapStateToPropsを使用するか、HoC withRouterを使用します。どちらのソリューションもEggheadシリーズで既に説明しているので、ここでそれらを要約します。

それでも問題が解決しない場合は、そのシリーズの完成したアプリケーションのリポジトリをチェックアウトすることをお勧めします。

どちらも正常に動作するようです（両方をテストしました）。

19
indiesquidge

React Router v4は、パスの正規表現を受け入れません。ドキュメントのどこにもカバーされている正規表現は見つかりません。正規表現の代わりに、<Switch>コンポーネント内に複数のルートを作成するだけで、一致する最初のルートがレンダリングされます。

<BrowserRouter>
  <Switch>
    <Route  path="/" component={App} />
    <Route  path="/:filter" component={App} />
  </Switch>
</BrowserRouter>

Appコンポーネントにもバグがあります。 paramsプロパティではなく、matchプロパティを介してparamsを取得します（テストされていませんが、これは必要なものに近いはずです）。

const App = ({match}) => {
    return ( 
      <div>
        <AddTodo />
        <VisibleTodoList 
            filter={match.params.filter || 'all'} 
        />
        <Footer />
      </div>
    );
}

上記のすべては、 あいまいな一致に関するReact Router V4ドキュメント でカバーされています

6
Todd Chaffee

react-routerドキュメンテーション から、props.match.paramsはパラメーターの格納場所です。

フィルター名にアクセスするには、これを試してください

const App = ({match}) => {
    ...
    <VisibleTodoList 
        filter={match.params.filter || 'all'}
    />
    ...
}
1
glhrmv

反応ルーターが適切に機能しているにもかかわらずフィルターを検出できない理由がわかりません。location.pathnameを使用してこの問題を解決しました。私は反応するルーターが正規表現のためにフィルターのパラメーターを検出できないと思うので、||すべてをルートで使用しますが、残念ながら私には検出できませんので、location.pathnameを使用しました。正規表現でのパス構成が不明なため、これに関する提案に感謝します。

0
gpbaculio