React Router は、React でルーティングするための標準ライブラリです。これにより、React アプリケーション内のさまざまなコンポーネントからのビュー間のナビゲーションが可能になり、ブラウザーの URL を変更できるようになり、UI と URL の同期が維持されます。
React Router がどのように機能するかを理解するために、React 用の簡単なアプリケーションを作成してみましょう。アプリケーションには、home、about、contact コンポーネントが含まれます。 React Router を使用してこれらのコンポーネント間を移動します。
npx 作成-反応-アプリ
開発環境の準備が整いました。次に、アプリケーションに React Router をインストールしましょう。
反応ルーター : React Router は、npm 経由で React アプリケーションにインストールできます。 React アプリケーションで Router を設定するには、以下の手順に従ってください。
ステップ 1: プロジェクト ディレクトリに CD を挿入します。 .、ジャバ。
ステップ 2: 次のコマンドを使用して React Router をインストールします。
npm install - -save 反応ルーターダム
React-router-dom をインストールした後、そのコンポーネントを React アプリケーションに追加します。
React Router コンポーネントの追加:
React Router の主なコンポーネントは次のとおりです。
ルートは順番に移動するのではなく、最も一致するものに基づいて選択されます。
React Router コンポーネントをアプリケーションに追加するには、使用するエディターでプロジェクト ディレクトリを開き、app.js ファイルに移動します。次に、以下のコードを app.js に追加します。
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; 注: BrowserRouter は Router としてエイリアスされます。
Reactルーターの使用: React Router を使用するには、まず React アプリケーションでいくつかのコンポーネントを作成しましょう。プロジェクト ディレクトリの src フォルダー内に、components という名前のフォルダーを作成し、home.js、about.js、contact.js という名前の 3 つのファイルをコンポーネント フォルダーに追加します。
3 つのコンポーネントにコードを追加してみましょう。
ホーム.js:
import React from 'react'; function Home (){ return } export default Home; .js について:
import React from 'react'; function About () { return <h2> jAVAtPOINT is a computer science portal for TUTORIALS!</h2> Read more about us at : <a href="https://www.javatpoint.in/about/"> https://www.javatpoint.in/about/ </a> } export default About; Contact.js:
import React from 'react'; function Contact (){ return You can find us here: <br> Javatpoint <br> G-13, second floor, Sector -3 Noida <br> Noida, Uttar Pradesh (201305) } export default Contact; 次に、アプリケーションに React Router コンポーネントを含めてみましょう。
ブラウザルーター : エイリアス化された BrowserRouter をルーターとして app.js ファイルに追加し、他のすべてのコンポーネントをラップします。 BrowserRouter は親コンポーネントであり、子を持つことができるのは 1 つだけです。
class App extends Component { render() { return ( ); } } リンク: 次に、コンポーネントのリンクを作成しましょう。 Link コンポーネントは、小道具を使用して、リンクの移動先の場所を記述します。
<ul> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul>
次に、ローカル ホストでアプリケーションを実行し、作成されたリンクをクリックします。 URL はリンクコンポーネントの値に応じて変化することがわかります。
ルート : ルート コンポーネントは、コンポーネントの UI と URL の間のリンクを確立するのに役立ちます。アプリケーションにルートを含めるには、以下のコードを app.js に追加します。
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> これでコンポーネントが接続され、リンクをクリックすると対応するコンポーネントが表示されます。次に、ルート コンポーネントに関連付けられた props を理解してみましょう。
- 要素は、パスが一致する場合にレンダリングされるコンポーネントを指します。
注: デフォルトでは、ルートは包括的です。つまり、複数のルート コンポーネントが URL パスに一致し、同時にレンダリングできることを意味します。単一のコンポーネントをレンダリングしたい場合は、ここでルートを使用する必要があります。
ルート : 単一のコンポーネントを読み取るには、すべてのルートを Routes コンポーネント内にラップします。
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> 複数のルート間でグループを切り替え、それらを反復処理して、パスに一致する最初のルートを見つけます。したがって、パスの対応するコンポーネントがレンダリングされます。
すべてのコンポーネントを追加した後の完全なソース コードは次のとおりです。
import React, { Component } from 'react'; import { BrowserRouter as Router,Routes, Route, Link } from 'react-router-dom'; import Home from './component/home'; import Contact from './component/contact'; import About from './component/about'; import './App.css'; class App extends Component { render() { return ( <ul classname="App-header"> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul> <route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> ); } } export default App; </route></route></route> これで、リンクをクリックしてさまざまなコンポーネントに移動できるようになります。 React Router は、アプリケーション UI を URL と同期させます。
最後に、React Router を使用して React アプリケーションにナビゲーションを実装することに成功しました。
HTML5 履歴 API (pushstate、replacestate、popstate イベント) を使用して UI を URL と同期させます。
ベース名: 文字列
すべての場所のベース URL。アプリがサーバー上のサブディレクトリから提供される場合は、そのサブディレクトリにアプリを設定する必要があります。適切にフォーマットされたベース名には、先頭にスラッシュが含まれている必要がありますが、末尾のスラッシュは含まれていません。
// renders // renders <a href="tmp//calendar/tomorrow"> ... </a>
getUserconfirmation: 関数
ナビゲーションを確認するために使用する機能。デフォルトでは window.confirm を使用します。
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> 強制リフレッシュ: ブール値
true の場合、ルーターはページ全体の更新でページ ナビゲーションを使用します。これを使用して、従来のサーバーでレンダリングされたアプリがページ ナビゲーション間のページ全体の更新でどのように動作するかを模倣することもできます。
keyLength: 数値
ネットワークにおける OSI 参照モデル
場所の長さ。鍵。デフォルトは 6 です。
子: ノード- レンダリングする子要素。
注: React では、render メソッドが複数の要素を返すことができないため、単一の子要素を使用する必要があります。複数の要素が必要な場合は、追加の または で要素をラップしてみてください。
URL のハッシュ部分 (つまり、window.location.hash) を使用して UI を URL と同期させます。
注: ハッシュは履歴の場所をサポートしていません。キーまたは場所。州。以前のバージョンでは、動作を軽減しようとしましたが、解決できないエッジケースがありました。この動作を必要とするコードやプラグインは機能しません。
このテクノロジーは古いブラウザのみをサポートすることを目的としているため、代わりに動作するようにサーバーを構成することをお勧めします。
ベース名: 文字列
すべての場所のベース URL。適切にフォーマットされたベース名には先頭にスラッシュが必要ですが、末尾にスラッシュはありません。
// renders <a href="#/calendar/today"> </a>
getUserconfirmation: 関数
ナビゲーションを確認するために使用する機能。デフォルトでは window.confirm を使用します。
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> ハッシュタイプ: 文字列
使用されるエンコーディング window.location.hash 。使用可能な値は次のとおりです。
- 'slash' - #/ や #/sunshine/lollipops のようなハッシュを作成します
- 'noslash' - # および #sunshine/lollipops 。ハッシュが作成するように
- 「hashbang」 - #!/ や #!/sunshine/lollipops などの「ajax クロール可能」 (Google によって非推奨) ハッシュを作成します
デフォルトは「スラッシュ」です。
子: ノード
レンダリングする単一の子要素。
アプリケーション周囲の宣言的でアクセス可能なナビゲーションを提供します。
About
to: 文字列
リンクの場所の文字列表現は、その場所のパス名、検索、およびハッシュのプロパティを組み合わせて作成されます。
次のいずれかのプロパティを持つことができるオブジェクト:
に: 関数
現在の位置が引数として渡され、位置表現を文字列またはオブジェクトとして返す必要がある関数。
({ ...location, pathname: '/courses' })} /> `${location.pathname}?sort=name`} /> 置換: ブール値
true の場合、リンクをクリックすると、新しいエントリを追加するのではなく、現在のエントリが置き換えられます。
entry to the history stack.
内部参照: 関数
React Router 5.1 の時点では、React 16 を使用している場合、参照を基になるルーターに転送するため、このプロップは必要ありません。 。代わりに通常の参照を使用してください。
コンポーネントの組み込み参照へのアクセスを許可します。
{ // `node` refers to the mounted DOM element // or null when unmounted }} /> innerRef: RefObject
React Router 5.1 の時点では、React 16 を使用している場合は、参照を基になるルーターに転送するため、このプロップは必要ありません。 。代わりに通常の参照を使用してください。
React.createRef を使用してコンポーネントの基になる ref を取得します。
let anchorRef = React.createRef()
コンポーネント: React.Component
独自のナビゲーション コンポーネントを利用したい場合は、それをコンポーネント prop に渡すことで実現できます。
const FancyLink = React.forwardRef(({ navigate, ...props }, ref) => { return ( <a ref="{ref}" {...props} onclick="{handleClick}">💅 {props.children} ) }) </a> に載せたい小道具を渡すこともできます タイトル、ID、クラス名など。
その特別なバージョンでは、既存の URL と一致する場合、レンダリングされた要素にスタイル属性が追加されます。
About
クラス名: 文字列 |機能
className には、文字列または文字列を返す関数のいずれかを指定できます。関数 className が使用される場合、リンクのアクティブ状態がパラメータとして渡されます。これは、非アクティブなリンクに className を排他的に適用する場合に役立ちます。
'nav-link' + (!isActive ? ' unselected' : '') } >
よくある質問
React Router v6 では、activeClassName が削除されるため、関数 className を使用してクラス名をアクティブまたは非アクティブな NavLink コンポーネントに適用する必要があります。
ActiveClassName: 文字列
要素がアクティブなときに要素に与えるクラス。デフォルトの指定クラスはアクティブです。これは classname プロパティと結合されます。
スタイル: オブジェクト |機能
style は、React.CSSProperties オブジェクトまたはスタイル オブジェクトを返す関数のいずれかです。関数スタイルが使用される場合、リンクのアクティブ状態がパラメータとして渡されます。
オーストラリアの都市
({ color: isActive ? 'green' : 'blue' })} > React Router v6 では、アクティブなスタイルが削除されるため、関数スタイルを使用してアクティブまたは非アクティブな NavLink コンポーネントにインライン スタイルを適用する必要があります。
アクティブなスタイル: オブジェクト
要素がアクティブなときに要素に適用されるスタイル。
<navlink to="/faq" activestyle="{{" fontweight: 'bold', color: 'red' }} < pre> <h3>exact: bool</h3> <p>When true, the active class/style will only apply if the location is an exact match.</p> <pre> Profile </pre> <h3>strict: bool</h3> <p>If true, the trailing slash on a location's pathname will be considered when determining whether the location matches the current URL. See the documentation for more details.</p> <pre> Events </pre> <h3>isActive: func</h3> <p>A function to add additional logic to determine if the Link is active. This should be used when you want to do more than verify that the pathname of the Link matches the pathname of the current URL.</p> <pre> { if (!match) { return false; } // only consider an event active if its event id is an odd number const eventID = parseInt(match.params.eventID); return !isNaN(eventID) && eventID % 2 === 1; }} > Event 123 </pre> <h3>location: object</h3> <p>isActive Compares to the current history location (usually the current browser URL).</p> <h3>aria-current: string</h3> <p> <strong>The value of the area-current attribute used on the active Link. Available values are:</strong> </p> <ul> <li>'page' - used to indicate a link within a set of pagination links</li> <li>'Steps' - used to indicate a link within the step indicator for a step-based process</li> <li>'location' - used to indicate an image that is visually highlighted as the current component of the flow chart</li> <li>'date' - used to indicate the current date within the calendar</li> <li>'time' - used to indicate the current time within a timetable</li> <li>'true' - used to indicate whether NavLink is active</li> <li>'false' - used to prevent assistive technologies from reacting to the current Link (one use case would be to prevent multiple area-current tags on a page)</li> </ul> <hr></navlink> 厳密: ブール値
true の場合、場所が現在の URL と一致するかどうかを判断するときに、場所のパス名の末尾のスラッシュが考慮されます。詳細については、ドキュメントを参照してください。
Events
isActive: 関数
リンクがアクティブかどうかを判断するための追加ロジックを追加する関数。これは、リンクのパス名が現在の URL のパス名と一致することを確認する以上のことを行う場合に使用する必要があります。
{ if (!match) { return false; } // only consider an event active if its event id is an odd number const eventID = parseInt(match.params.eventID); return !isNaN(eventID) && eventID % 2 === 1; }} > Event 123 場所: オブジェクト
isActive 現在の履歴の場所 (通常は現在のブラウザの URL) と比較します。
aria-current: 文字列
アクティブなリンクで使用される area-current 属性の値。使用可能な値は次のとおりです。
- 「page」 - ページネーション リンクのセット内のリンクを示すために使用されます。
- 「ステップ」 - ステップベースのプロセスのステップインジケーター内のリンクを示すために使用されます。
- 「location」 - フローチャートの現在のコンポーネントとして視覚的に強調表示される画像を示すために使用されます。
- 「日付」 - カレンダー内の現在の日付を示すために使用されます。
- 'time' - タイムテーブル内の現在時刻を示すために使用されます。
- 'true' - NavLink がアクティブかどうかを示すために使用されます
- 'false' - 支援技術が現在のリンクに反応するのを防ぐために使用されます (1 つの使用例は、ページ上の複数のエリア現在のタグを防ぐことです)