web-dev-qa-db-ja.com

ルートに応じて条件付きコンポーネントのレンダリングを処理する適切な方法は？

私はWebとSOで多くの検索を行い、reactifluxチャットで質問しましたが、ルート/パスに応じて一部のコンポーネントをレンダリングするクリーンでハッキングされていない方法が見つかりませんでした。

<Header />があり、これは一部のページに表示され、他のページには非表示になっているとしましょう。

確かに私はヘッダーコンポーネントでこの文字列を使用できます

if (props.location.pathname.indexOf('/pageWithoutAHeader') > -1) return null

/pageWithoutAHeaderが一意である場合、これはまったく問題ありません。 5ページに同じ機能が必要な場合は、次のようになります。

if (props.location.pathname.indexOf('/pageWithoutAHeader1') > -1) return null
if (props.location.pathname.indexOf('/pageWithoutAHeader2') > -1) return null
if (props.location.pathname.indexOf('/pageWithoutAHeader3') > -1) return null

はい、配列にルートを格納してループを作成できます。これにより、コードの再利用性が向上します。しかし、これはこのユースケースを処理するための最良かつ最もエレガントな方法ですか？

たとえば、ルート/xyzのページのヘッダーをレンダリングせず、/projects/:idやid=xyzfooなどのUUIDのルートがある場合は、バグが発生する可能性もあると思います。したがって、/projects/xyzfooはヘッダーを表示しませんが、表示する必要があります。

reactjsreact-routerreact-router-v4react-router-domreact-router-v5
6
flppv

最初にヘッダーのないすべてのルートを一覧表示し、他のルートを追加のスイッチにグループ化できます。

...
<Switch>
  <Route path="/noheader1" ... />
  <Route path="/noheader2" ... />
  <Route path="/noheader3" ... />
  <Route component={HeaderRoutes} />
</Switch>
...

HeaderRoutes = props => (
  <React.Fragment>
    <Header/>
    <Switch>
      <Route path="/withheader1" ... />
      <Route path="/withheader2" ... />
      <Route path="/withheader3" ... />
    </Switch>
  </React.Fragment>
)

ドキュメント から：

パスのないルートは常に一致します。

残念ながら、このソリューションでは「見つからない」ページに問題がある可能性があります。 HeaderRoutesの最後に配置する必要があり、Headerでレンダリングされます。

ダラの解決策 そのような問題はありません。ただし、Reactルーターの内部が変更された場合、Switchではうまく機能しない可能性があります。

<Switch>のすべての子は、<Route>または<Redirect>要素である必要があります。現在の場所に一致する最初の子のみがレンダリングされます。

Route上のHOCはRoute自体ではありません。しかし、現在のコードベースは実際にはReact.Elementおよび<Route>と同じ小道具セマンティクスを持つ<Redirect>を想定しているため、正常に機能するはずです。

1
UjinT34

ヘッダーに関するこのデータをルートパラメータまたはクエリとして含めます。

/ projects /：headerBool /：id

または：

/ projects /：id？header = false

次に、props.matchまたはprops.locationを介してアクセスできます。

2
Craig Gehring

ルートのrender属性を使用できます。例：

<Route path='/pageWithoutHeader' render={() => <Page1 />} />
<Route path='pageWithHeader' render={() => 
      <Header/>
      <Page2 />}
/>

この方法は、ページ内のヘッダーコンポーネントを使用するよりも優れています。

0
Aman Singh