＆lt; route＆gt;を使用してルートをどのように定義しますか 成分？

コンポーネントを使用してルートをどのように定義しますか？

Reactルーターの<route></route>コンポーネントを使用してルートを定義するには、主に<browserrouter></browserrouter>や<hashrouter></hashrouter>などのルーターコンポーネント内で使用します。 <route></route>コンポーネントは、 pathが現在のURLと一致する場合にUIをレンダリングする責任があります。使用方法は次のとおりです。

 <code class="jsx">import { BrowserRouter, Route } from 'react-router-dom'; function App() { return ( <browserrouter> <div> <route path="/" component="{Home}"></route> <route path="/about" component="{About}"></route> <route path="/contact" component="{Contact}"></route> </div> </browserrouter> ); }</code>

この例では、3つのルートが定義されています。

• ホームルート（ "/"）は、 Homeコンポーネントをレンダリングします。
• About Route（ "/about"）は、 Aboutコンポーネントをレンダリングします。
• コンタクトルート（ "/contact"）は、 Contactコンポーネントをレンダリングします。

<route></route>コンポーネントをさまざまな方法で使用して、レンダリングするコンポーネントを渡すことができます。

• 上記のように直接componentプロップを使用します。
• render Propを使用すると、追加の小道具を含むコンポーネントをインラインでインラインできます。
• children Propを使用して、パスが現在のURLと一致するかどうかに関係なくコンポーネントをレンダリングできます。

コンポーネントで使用できるさまざまな小道具は何ですか？

React Routerの<route></route>コンポーネントは、その動作とレンダリングロジックを定義するいくつかのプロップをサポートしています。主な小道具は次のとおりです。

• path ：ルートが一致するものの文字列または文字列の配列。指定されていない場合、ルートは常に一致します。
• component ：場所がpathと一致するときにレンダリングする反応コンポーネント。この小道具は、 renderとchildrenと相互に排他的です。
• render ：ロケーションが一致するときにReact要素を返してレンダリングを返す関数。追加の小道具をコンポーネントに渡す必要がある場合、またはインラインレンダリングを行う必要がある場合に便利です。
• children ：反応要素を返す関数。ルートがパスと一致するかどうかをレンダリングし、現在の場所に関係なく何かをレンダリングしたいアニメーションやその他の状況に役立ちます。
• exact ：真実の場合、URLパス全体が接頭辞だけでなく一致する場合にのみルートを一致させるブール。
• strict ：真実であれば、 pathでトレーリングスラッシュを重要なものにするブール値。
• location ：現在の場所を表すオブジェクト。これは通常、ネストされたルーターに使用されます。
• sensitive ：真実であれば、ルートがケースに敏感になるブール。

これらの小道具を使用して、アプリケーションのさまざまなルーティングニーズに適合するように<route></route>コンポーネントを構成できます。

コンポーネントはネストされたルートをどのように処理しますか？

Reactルーターの<route></route>コンポーネントは、ネストされたルーティングの概念を通じてネストされたルートをサポートします。これにより、より複雑で整理されたルーティング構造が可能になります。ネストされたルートを実装する方法は次のとおりです。

1. 親ルートを定義する：ネストされたルートを含むメインルートを定義することから始めます。
2. children小道具を使用する：親ルートのコンポーネント内で、追加の<route></route>コンポーネントを使用して、ネストされたルートを定義できます。これは、 children小道具を使用するか、親コンポーネント内でネストされたルートを直接定義することで実行できます。

ネストされたルーティングの例は次のとおりです。

 <code class="jsx">import { BrowserRouter, Route, Link } from 'react-router-dom'; function App() { return ( <browserrouter> <div> <route path="/" component="{Home}"></route> <route path="/users" component="{Users}"></route> </div> </browserrouter> ); } function Users({ match }) { return ( <div> <h2 id="Users">Users</h2> <ul> <li>
<link to="{`${match.url}/user1`}">User1</li> <li>
<link to="{`${match.url}/user2`}">User2</li> </ul> <route path="{`${match.path}/:userId`}" component="{User}"></route> </div> ); } function User({ match }) { return <h3 id="User-match-params-userId">User {match.params.userId}</h3>; }</code>

この例では、 /usersルートはUsersコンポーネントをレンダリングし、ネストされた<route></route>を使用して特定のユーザーのルートを定義します（例： /users/user1 ）。プロップとして渡されたmatchオブジェクトは、ネストされたルートの相対URLを構築するのに役立ちます。

コンポーネントで「正確な」プロップを使用する方法を説明できますか？

exact小道具は、 <route></route>コンポーネントで使用され、ルートパスがURLパスの開始と一致するのではなく、URLパス全体と一致するようにします。これは、意図しない試合を避けたい場合に特に便利です。

exact小道具を使用する方法は次のとおりです。

 <code class="jsx">import { BrowserRouter, Route } from 'react-router-dom'; function App() { return ( <browserrouter> <div> <route exact path="/" component="{Home}"></route> <route path="/about" component="{About}"></route> </div> </browserrouter> ); }</code>

この例では：

• パスを備えたルート"/" exact小道具を使用します。これは、ルートURL（ "/" ）のみに一致し、 "/about"のようなURLとは一致しないことを意味します。
• exact小道具がなければ、ホームルート（ "/" ）も"/about"のようなURLと一致しますが、これは通常あなたが望むものではありません。

より一般的なルートの下でより具体的なルートを定義する場合、 exact小道具は特に重要になります。たとえば、ダッシュボード（ "/dashboard" ）のルートがあり、ダッシュボード内の特定のセクション（ "/dashboard/settings" ）の別のルートがある場合、ダッシュボードルートをexact使用して設定ルートの一致を防ぐことができます。

要約すると、 exact小道具は、現在のURLへのルートパスの正確な一致を保証し、より具体的なパスで意図しない一致を回避します。

以上が＆lt; route＆gt;を使用してルートをどのように定義しますか 成分？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。