反応ルータ🔀

やあ、元気?あなたが良いことをしていることを願って、今日、我々は反応ルータについて話します.
Router Routerは我々のウェブアプリケーションのルートを扱うことができるライブラリです.

なぜ我々はルートが必要ですか？🤷‍♂️

なぜ私たちがルートを必要としているのか疑問に思うかもしれません.スパを開発しているなら、あなたが表示したいコンポーネントを変更するために状態に基づいて条件付きのレンダリングを使用していることは非常にありそうです.我々のアプリケーションが大きく複雑になるとどうなるのですか?
この条件付きレンダリングは、理解し、管理し、維持するのが難しくなるかもしれません.

ドキュメントから:

コンポーネントは、反応の強力な、宣言的なプログラミングモデルの中心です.Router Routerは、アプリケーションと宣言的に構成するナビゲーションコンポーネントのコレクションです.
Roleルータでは、次のようになります.
1 -パスに基づいてどのコンポーネント/コンポーネントをレンダリングするかを定義します.
2 -我々のブラウザのバックとフォワードボタンを使用します.

反応ルータの主な構成要素

1 . BrowserRouter :このコンポーネントは、URLの種類を扱う方法を知っているダイナミックなサーバを持つアプリケーションに使用されます.これは、サーバーが正しく設定されなければならないことを意味します.具体的には、当社のWebサーバーは、すべてのURLで管理されているクライアント側の反応ルータを使用して同じページを提供する必要があります.

歴史📍

我々が知る必要がある何か重要なことは、我々のルータが現在の位置を追跡するのに用いられる歴史オブジェクトをつくるということです.
2 -ルート:これは反応ルータの重要な部分です、それが主な責任が場所がルートのパスと一致するとき、何かを与えることになっています.ルートは、この3つの引数を期待します.
引数
説明
正確
Booleanプロパティです.指定したパスを正確に指定する必要があります
パス
現在の場所のパスに等しい文字列です
コンポーネント
レンダリングするコンポーネント
*ルートのパスが一致した場合に何をレンダリングするかを指定する他の方法がありますが、後でそれについて説明します.
3 .-リンク:我々のアプリケーションの周りの宣言、アクセス可能、ナビゲーションを提供します.
リンクは2属性を取り、置換する.
引数
説明
To
することができます文字列、オブジェクトや関数は、どのパスにリダイレクトするアプリを指示する
置換
オプションのBooleanです.これはtrueの場合、新しいスタックを追加する代わりに、履歴スタックの現在のエントリを置換します
4リダイレクト:レンダリングは、新しい場所に移動します.新しい場所は、履歴スタック内の現在位置をオーバーライドします、我々は、ユーザーが既にログインしているときに、彼はログインページに移動しようとすると、それを行うにはポイントがないので、彼はそれをしようとすると、我々はホームページに彼をリダイレクトすることができます場合は、例えば、これを使用することができます.
5 . -スイッチ:私たちは、ルート/リダイレクトをラップするコンポーネントを使用することができますし、場所に一致する最初の子をレンダリング/リダイレクトされます.
どのようにルートの束を使用するよりも?
ユニークなのは排他的にルートをレンダリングします.

インストール🔧

npm install --save react-router

セットアップ⚙️

コード化を開始して、最初に我々のルータで遊ぶのを始めるためにコンポーネントのカップルをつくることができて、構成要素フォルダを作成することができて、3つの構成要素、ログイン、家とダッシュボードの内部でできます:

最後の写真では、各コンポーネントのフォルダーフォルダーとフォルダの内部を見ることができます.今、私はスタイルのファイルを作成していません.コンポーネント.しかし、あなたが好きな名前を付けることができます.
コンポーネントは非常に簡単になります.

import React from 'react';

const Login = () => {
  return(
    <div>This is Login Page</div>
  )
}

export default Login;

今すぐ我々のアプリに行くことができます.我々のコンポーネントと我々のルータ構成要素を輸入するJS.最初に我々のBrowserRouterとすべてをラップすることができます最初に我々のコンポーネントをナビゲートするためにリンクのカップルを作成し、我々のルートを指定し、それをテストすることができますここでは、ここで我々のアプリのコードです.js

import React from 'react';
import { 
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'
import './App.css';

import Login from './components/login/login.component';
import Home from './components/home/home.component';
import Dashboard from './components/dashboard/dashboard.component';

function App() {
  return (
    <Router>
      <div>
      <Link to="/login">Login</Link><br/>
      <Link to="/home">Home</Link><br/>
      <Link to="/dashboard">Dashboard</Link><br/>
      </div>
      <Route exact path='/login' component={Login}/>
      <Route exact path='/home' component={Home}/>
      <Route exact path='/dashboard' component={Dashboard}/>
    </Router>
  );
}

export default App;

ご覧のように、変更を保存した後、ブラウザでリンクを見て、コンポーネントをナビゲートしますが、ログインリンクをクリックすると、ページ内のコンテンツが変更され、リンクの下にログインコンポーネントが表示されます.
私たちのリンクの残りの部分をクリックすると同じURLが表示されます.

偉大な我々のルータは、私たちが期待するように動作している、どのようにルートの動作の正確な引数を見ることができます、最初に私たちのホームコンポーネントのルートのパスを変更することができますまた、私たちのホームコンポーネントのリンクを変更することができますし、ルートから正確な引数を削除することができます、これは新しいコードです:

function App() {
  return (
    <Router>
      <div>
        <Link to="/">Home</Link><br/>
        <Link to="/login">Login</Link><br/>
        <Link to="/dashboard">Dashboard</Link><br/>
      </div>
      <Route exact path='/' component={Home}/>
      <Route exact path='/login' component={Login}/>
      <Route exact path='/dashboard' component={Dashboard}/>
    </Router>
  );
}

我々が今見ることができるように、我々のホームコンポーネントは常に見えます、そして、これの理由はパス('/')がすべてのシナリオでブラウザーでURLと一致するからです.

引数がレンダリングされたコンポーネントに渡されます。

重要なことは、ルートによってレンダリングされるどんなコンポーネントも3つの引数、歴史、場所とマッチを通過するということです.

ここでは、引数の最も使用されるプロパティの説明です.
引数
説明
マッチ
⬇️
URL
コンポーネントが一致するまでのURLですので、コンポーネントに関連付けられているパスが'/'である場合は、http://localhost:3000/またはhttp://localhost:3000/topics/details/somethingに移動します.一致するまでのURLです.
パス
我々のルートが一致するように見えているパターンは、それは、我々が我々のルートで指定する経路を意味します.
isexact
URL全体がマッチするパターンと一致する場合にtrueになります
パーム
はURLパラメータのオブジェクトです.このパスでルートを持っていると言うことができます''/話題/トピピッド'は'/話題/'後に";topicid "を持っていることを通知します.そして、データベースからの取得データのためにそれらのparamsを使用することができます、あるいは、それが若干のアイテムのためのタイトルであるならば、我々はそれをコンポーネントでそのタイトルを表示するために使うことができます.
歴史
⬇️
プッシュ
Relay Routerで移動する2つの方法があります.最初の1つはリンクコンポーネントを使用しています.ここで、パラメータを指定することができます.例えば:「/トピック」へ.ちょうど反応がスパであるので、我々が実際にしていることは、URLをハイジャックして、JavaScriptでどんなコンポーネントを交換するかについて決めています.他の方法としては小道具です.ヒストリー.プッシュ('話題)
ロケーション
⬇️
パス名
それは私たちは、アプリケーション内にある場所を教えてください.それで、我々が移動するならば、http://localhost:3000/topics/15/something/propsはそのURLが正確にパス名が戻るものであることです.そして、我々のコンポーネントが完全なURLがどのように見えるかについてわかっているので、これは役に立ちます.

入れ子ルーティング

入れ子になったルーティングの迅速な例を作成し、topicslistコンポーネントをトピックコンポーネントに追加します.
これはtopicslistコンポーネントのコードです.

import React from 'react';
import { Link } from 'react-router-dom'

const TopicsList = (props) => {

  React.useEffect(() => {
    console.log(props.match.url);
  }, []);

  return(
    <div>
      <h1>Topics List Page</h1>
      <Link to={`${props.match.url}/A`} >To topic A</Link><br/>
      <Link to={`${props.match.url}/B`} >To topic B</Link><br/>
      <Link to={`${props.match.url}/C`} >To topic C</Link><br/>
    </div>
  )
}

export default TopicsList;

ご覧のように、topicslistコンポーネント内のリンクを使用しています.また、“to”引数は文字列テンプレートで作成されます.マッチ.URL +私たちが見たいトピック.小道具マッチ.URLはtopicslistコンポーネントを表示するために指定されたパスであるため、'/話題'です.その値をログ出力します.
その後、どのトピックを見たいかを指定します

これはトピックコンポーネントのコードです.

import React from 'react';

const Topic = (props) => {

  React.useEffect(() => {
    console.log(props);
  }, []);

  return(
    <div>
      <h1>Topic {props.match.params.topicId}</h1>
    </div>
  )
}

export default Topic;

トピックコンポーネント内では、小道具を使用しています.マッチ.PARAMTOPIIID我々はレンダリングする必要があるトピックを知りたいので、すべてのトピックをレンダリングするために同じコンポーネントを使用しているので、コンテンツを変更する必要があります.

今我々はちょうど我々のアプリを更新する必要があります.このコードのjs

import React from 'react';
import { 
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'
import './App.css';

import Home from './components/home/home.component';
import TopicsList from './components/topicsList/topicsList.component';
import Topic from './components/topic/topic.component';

function App() {
  return (
    <Router>
      <div>
        <Link to="/">Home</Link><br/>
        <Link to="/topics">TopicsList</Link><br/>
      </div>
      <Route exact path='/' component={Home}/>
      <Route exact path='/topics' component={TopicsList}/>
      <Route exact path='/topics/:topicId' component={Topic}/>
    </Router>
  );
}

export default App;

トピックコンポーネントのルートに注意してください.

<Route exact path='/topics/:topicId' component={Topic}/>

話題の後に/私たちが使用する:私たちがテーブルの前に言ったようにtopicid、これは私たちが動的にURLを変えることができるこの点の後、それがパラメタとして渡されることを意味します.
私たちの変更を保存し、我々のアプリをテストします.

あなたが見ることができるように、すべてが期待通りに働いています、今、あなたはすべてがどのように一緒に働くかを知っています、どのように我々はルートによって、そして、関連コンポーネントによって示される構成要素に渡されている小道具を使うことができますか.
私はあなたがこのポストを楽しみました、そして、あなたがそれが好きであるならば、あなたがそれが好きであるならば、役に立つとわかりました、また、あなたがこのポストについてのどんな考えも持っているならば、また、ここでコメントするか、私に連絡するために自由に感じてください、どんなフィードバックでも有り難いです.
良い一日を!✌️