web-dev-qa-db-ja.com

Reactルータースイッチと正確なパス

react-router Switch についてこのドキュメントを読みました

スイッチアンドルートに関する定義を理解している

しかし、それでもいくつかのポイントを理解することができませんでした

レンダリングするルートを1つだけ選択する場合は、次のようにスイッチを使用します

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/a" component={A} />
  <Route path="/b" component={B} />
</Switch>

わからない点はスイッチなしでも同じ効果が得られる

 <Route exact path="/" component={Home} />
 <Route path="/a" component={A} />
 <Route path="/b" component={B} />

では、なぜSwitchを使用するのですか？ Switchはいつ使用する必要がありますか？

スイッチを使用する必要がある状況を見つけました

パスが一致しないときに特定のコンポーネントをレンダリングしたい場合

このようにスイッチでルートをラップする必要があります

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/a" component={A} />
  <Route path="/b" component={B} />
  <Route component={SpecificComponent} />
</Switch>

私は正しいですか？

reactjsreact-routerreact-router-v4
8
Anymore

あなたの場合では、exactを使用して同じ効果を得ることができますが、常にそうであるとは限りません。ただし、ルートの1つにネストされたルートが含まれている場合、最上位に正確なルートがあると、ネストされたルートを利用できません。

上記の場合のSwitchは、最初の一致のみをレンダリングするため、目的を果たします

例えば、

たとえば、ホームルートに次のようなネストされたルートが含まれているとします。

const Home = (props) => (
     <div>
          <Route path="/dashboard" component={Dashboard}/>
          <Route path="/layout" component={Layout}/>
     </div>
)

だから今書くなら

<Route exact path="/" component={Home} />

/dashboardにアクセスしたとき。トップレベルの/dashboardと一致するルートがないため、そのDashboardコンポーネントをレンダリングできません。

例を正しく実行するには、Switchを使用してルートを並べ替え、他のパスのプレフィックスであるパスが最後になるようにします。

<Switch>
  <Route path="/a" component={A} />
  <Route path="/b" component={B} />
  <Route path="/" component={Home} />
</Switch>
7
Shubham Khatri

基本的に、「完全」キーワードはどちらも同じ目的を果たします。 （注：現在のURLがこのパスで始まるかどうかを確認するためにチェックを使用するマッチングアルゴリズム。）ただし、を使用している間は、ルート宣言または特定性の順序が重要です。より具体的なルートを上部に追加する必要があります。あなたの場合

<Switch>
<Route path="/a" component={A} />
<Route path="/b" component={B} />
<Route exact path="/" component={Home} />
</Switch>

「exact」の場合、「exact」を渡すと、パスが完全に一致する場合にのみ、このルートが一致します。あなたの場合、ホームパスは正確に設定されています。

<Route exact path="/" component={Home} />
<Route path="/a" component={A} />
<Route path="/b" component={B} />
1
jeet