Reactルーターを5分で学ぶ-初心者向けチュートリアル

たまに5分しか余裕がないこともあります。ソーシャルメディアで無駄にするのではなく、React-Routerの5分間の紹介をしましょう!このチュートリアルでは、Scrimba編み物店のWebサイトのナビゲーションを構築することにより、Reactでのルーティングの基本を学習します。それは本物ではありませんが、多分いつか...;)

このテーマの適切な紹介が必要な場合は、次の高度なReactコースの順番待ちリストに参加できます。まだ初心者の場合は、Reactの紹介コースを確認してください。

とにかく、React-Routerとは何ですか?

最近の多くのWebサイトは、実際には1つのページで構成されており、別々のページのようにレンダリングされるコンポーネントが含まれているため、複数のページのように見えます。-これらは通常のSPAと呼ばれているingle-のp年齢pplications。基本的に、React Routerが行うことは、URLで使用されているルート(ホームページ、概要ページなど)に応じて、特定のコンポーネントを条件付きで表示することです。//about

たとえば、Reactルーターを使用してwww.knit-with-scrimba.com/www.knit-with-scrimba.com/aboutまたはwww.knit-with-scrimba.com/shopに接続できます。

素晴らしいですね-どのように使用しますか?

React Routerを使用するには、最初にNPMを使用してインストールする必要があります。

npm install react-router-dom 

または、完成したコードがすでに記述されているScrimbaのこの遊び場を使用することもできます。

react-router-domパッケージからBrowserRouter、Route、およびSwitchをインポートする必要があります。

import React, { Component } from 'react'; import { BrowserRouter, Route, Switch } from 'react-router-dom'; 

私の例では、ランディングページをとShopと呼ばれる他の2つの「ページ」(実際には単なるコンポーネント)にリンクしますAbout

まず、Reactルーターと連携するようにアプリを設定する必要があります。レンダリングされるものはすべて要素内に配置する必要があるため、最初にアプリをそれらでラップします。これは、提供するさまざまなコンポーネントを表示するためのすべてのロジックを実行するコンポーネントです。

// index.js ReactDOM.render(   , document.getElementById('root') ) 

次に、アプリコンポーネントで、Switch要素(開始タグと終了タグ)を追加します。これらにより、一度に1つのコンポーネントのみがレンダリングされます。これを使用しない場合は、Error後で作成するコンポーネントをデフォルトにすることができます。

function App() { return (     ) } 

今度はタグを追加します。これらはコンポーネント間のリンクであり、タグ内に配置する必要があります。

ロードするコンポーネントをタグに指示するには、path属性と、component属性とともにロードするコンポーネントの名前を追加するだけです。

多くのホームページのURLは、サイト名の後に続きます("/"例:www.knit-with-scrimba.com/)。この場合、exactRouteタグに追加します。これは、他のURLにも「/」が含まれているためです。アプリに検索する必要があることを通知しないと/、ルートに一致する最初のURLが読み込まれ、対処するのにかなりトリッキーなバグが発生します。

function App() { return (        ) } 

次に、コンポーネントをアプリにインポートします。コードをクリーンで読みやすくするために、それらを別の「コンポーネント」フォルダーに入れておきたい場合があります。

import Home from './components/Home'; import About from './components/About'; import Shop from './components/Shop'; 

前述のエラーメッセージに、ユーザーが間違ったURLを入力すると読み込まれます。これは通常のタグと同じですが、パスがありません。エラーコンポーネントには次のものが含まれます

Oops! Page not found!

。アプリにインポートすることを忘れないでください。

function App() { return (         ) } 

これまでのところ、当サイトはURLを入力することによってのみナビゲートできます。クリック可能なリンクをサイトに追加するにはLink、React Routerの要素を使用して、新しいNavbarコンポーネントを設定します。繰り返しになりますが、新しいコンポーネントをアプリにインポートすることを忘れないでください。

次にLink、アプリの各コンポーネントにを追加し、を使用to="URL"してそれらをリンクします。

function Navbar() { return ( Home  About Us  Shop Now ); }; 

これで、サイトにクリック可能なリンクが追加され、シングルページアプリ内を移動できるようになりました。

結論

これで完了です。Reactアプリ内を簡単に移動したい場合は、アンカータグを忘れて、Reactルーターを追加してください。クリーンで整理されており、ページの追加と削除が非常に簡単になります。

ReactフックとReactの他の優れた機能の詳細については、次の高度なReactコースの順番待ちリストに参加できます。

または、より初心者に優しいものをお探しの場合は、Reactの入門コースをご覧ください。

ハッピーコーディング;)