反応ルータへのイントロ

何をカバーするか

What is react-router?

Installation & setup

Route component

Inline rendering

Multiple paths

Link & NavLink components

Dynamic routes

Switch component

Redirect component / Protected Routes

クリックして自由にしたい部分を右に移動します.
右にジャンプしましょう!😄
どのような反応ルータですか?
反応ルータは、特に解決のために設計されたルーティングソリューションです.js全体のアイデアは、URLと同期してユーザーインターフェイスを保つのを助けることです.
言い換えれば、別のURLを比較的簡単にヒットし、また、あなたのアプリケーションのナビゲーションを制御することができます反応ルーターレンダリング異なるコンポーネントになります.
インストールとセットアップ
他のフレームワーク/角度のようなライブラリは、ボックスからのルーティングソリューションを持っているとは異なり、反応ルータは反応から分離されます.JSライブラリと必要に応じてインストールする必要があります.
インストールコマンド

npm install react-router-dom

セットアップ
セットアップはかなり簡単です.あなたは、あなたのアプリケーションコンポーネントを反応ルータDOMによって提供されるBrowserRouterコンポーネントで包みたいです.
あなたがあなたのインデックスに頭を作成する反応アプリのスターター設定を使用している場合.srcフォルダ内のjs.
インポート

import { BrowserRouter } from "react-router-dom"

次に、ラップ<App /> 以下のようなブラウザで

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,

  document.getElementById("root")
)

これは、あなたのアプリケーションを介してルーティングを有効にし、反応ルータDOMによって提供されるコンポーネントの残りの部分を使用できるようになります.
では、リストの最初のコンポーネントを調べましょう.🧐
ルートコンポーネント
このコンポーネントを使用すると、特定のURLを押すだけで特定のコンポーネントをレンダリングできます.また、それはレンダリングのコンポーネントに関連する有用な情報を含む小道具としてオブジェクトを通過します.
我々はすぐにこのオブジェクトを見ているでしょう.
ルートコンポーネントを使用するには、次のようにインポートする必要があります.

import { Route } from "react-router-dom"

ルートコンポーネントは4つのメイン小道具を受け取ります.

path -コンポーネントをどのルートに表示するか?

コンポーネント-どのコンポーネントをそのパスに描画する必要がありますか?

厳密に-コンポーネントは、そのパス上で正確にレンダリングする必要がありますか?または同様のパスにも?

レンダリング-コンポーネントプロップの代わりにインラインコンポーネントをレンダリングするために使用-私たちはすぐに例を参照してくださいよ

例

// App.js

import React from "react"
import Nav from "./components/Nav"
import Home from "./components/Home"
import About from "./components/About"

import { Route } from "react-router-dom"

function App() {
  return (
    <div className="App">
      <Nav />
      <Route path="/" exact component={Home} />
      <Route path="/about" exact component={About} />
    </div>
  )
}

export default App

解説<Nav /> : それはAでレンダリングされていないので、常にすべてのルートに表示されます<Route /> コンポーネント.<Route path="/" exact component={Home} /> : この場合、localhost : 3000である"/"パスにホームコンポーネントが表示されます.<Route path="/about" exact component={About} /> : この場合、localhost : 3000/aboutである"/about "のパスについてのみ表示します.
我々が正確に使用しないならば、ホームホストでさえ、ホームは常に現れます:3000/about.理由は/aboutにも含まれます"/".それで、我々はこの振舞いを防ぐために正確を加えます.
我々は、4つの主要な小道具があると言及し、我々はこれまでカバー3のみ.それは我々にレンダリング支柱をもたらします..
インラインレンダリング
私のコンポーネントにカスタム小道具を渡す場合は、何を求めるかもしれない?
コンポーネントプロップを使用して調べた方法を使用して、コンポーネントにすべての小道具を指定することはできません.RouterルータはRenderという別のプロップを持っています.
例をチェックしましょう.

例

// App.js

import Home from "./components/Home"
import About from "./components/About"

import { Route } from "react-router-dom"

function App() {
  return (
    <div className="App">
      <Nav />

      <Route
        path="/"
        exact
        render={() => {
          return (
            <div>
              <h1>Home</h1>
              <p>welcome to my homepage</p>
            </div>
          )
        }}
      />

      <Route
        path="/about"
        exact
        render={<About text="This is my text that I want to pass down" />}
      />
    </div>
  )
}

解説
コンポーネントの代わりにRenderを使用すると、ホームルートのようにインラインのコンポーネントを書くこともできますし、コンポーネントのタグをこのコンポーネントが期待するすべての小道具で書くこともできます.

Note: Using render will result in React unmounting and mounting the inline component again on every render, instead of just updating the existing component.

複数パス
いくつかのルートで同じコンポーネントをレンダリングしたい場合は、パスを正規表現文字列として指定することにより、

<Route path="/(home|users|contact)/" component={Home} />

リンク& Navlinkコンポーネント
あなたのユーザーがURLにすべてのルートを入力してページに移動する必要はありません.これは、リンクとNavlinkのコンポーネントが入っているところです.
いくつかのテキストまたは他のコンポーネントをリンクまたはNavLinkでラップして、ユーザーがそれらをクリックしたときにユーザを取る場所を指定できます.
インポート

import { Link } from "react-router-dom"

例

     <Link to=”/contact>Contact</Link>

解説
ユーザーが「連絡先」をクリックしたとき、彼らはto =“...”で指定されたルートに連れて行かれますプロップこれは例えばNavbarコンポーネントで使用できます.
localhost : 3000を使用している場合、このリンクはlocalhost : 3000/contactに表示されます.
あなたが現在の現在のリンクだけで特定のスタイルを加えることを望むならば、どうですか?
代わりにNavlinkを使用してください.
インポート

import { NavLink } from "react-router-dom"

例

<NavLink to="/dashboard" activeClassName="selectedLink">
  Dashboard
</NavLink>

解説
“ActiveClassName =”SelectedLink ""を追加すると、現在のSelectedLinkにいくつかのスタイルを追加することができ、ユーザーがルート/ダッシュボード上にあるときにのみそのリンクに適用されます.
ダイナミックルート
コンポーネントが反応ルータライブラリによって発送されるとき、各々のルートはそのルートに関する情報のオブジェクトを提供されます、そして、それは小道具としてコンポーネントに渡されます.
指定した<Route /> そして、コンポーネントにプロップを加えてください.ログ(小道具)は、全体のオブジェクトをログ取得します.

例

export default function Contact(props) {
  console.log(props)

  return (
    <div>
      <h1>Contact component</h1>
    </div>
  )
}

出力

// @ localhost:3000/contact
// Browser console output

Object

    history:
        action: "POP"
        block: ƒ block(prompt)
        createHref: ƒ createHref(location)
        go: ƒ go(n)
        goBack: ƒ goBack()
        goForward: ƒ goForward()
        length: 4
        listen: ƒ listen(listener)
        location: {pathname: "/contact", search: "", hash: "", state: undefined}
        push: ƒ push(path, state)
        replace: ƒ replace(path, state)
        __proto__: Object

    location:
        hash: ""
        pathname: "/contact"
        search: ""
        state: undefined
        __proto__: Object

    match:
        isExact: true
        params: {}
        path: "/contact"
        url: "/contact"

    __proto__: Object
    staticContext: undefined
    __proto__: Object

すべてのこの情報は/連絡先のルートに固有のものであることがわかります.
残念なことに、我々はこのブログの中でそれらのすべてを調査していません、しかし、あなたは好きなだけ彼らと実験することができます.アイデアは、彼らが存在し、それらを使用できることをお知らせすることです.😊
マッチにあるParamsオブジェクトを探索します.

// @ localhost:3000/contact
// Browser console output

    match:
        isExact: true
        params: {} 👈
        path: "/contact"
        url: "/contact"

Paramでルートを設定し、コンポーネント内からアクセスしましょう.

例

// App.js

function App() {
  return (
    <div className="App">
      <Nav />
      <Route path="/" exact component={Home} />
      <Route path="/contact" exact component={Contact} />
      <Route path="/user/:user" exact component={User} /> // New route
    </div>
  )
}

解説
これが何であるかを疑問に思うかもしれません:ユーザ、これはパラメータまたはparamと呼ばれます.
簡単な言葉でそれを置くために、ちょうどそれが値であることができるプレースホルダーとしてそれを考えるだけでURLでセットされることができました.
例えば、localhost : 3000/user/whoを訪問します.paramは「誰か」という文字列に設定され、ユーザーの場所に何かを追加する場合も同様です.
localhostを訪問するだけで値を選択します.
では、ユーザーコンポーネントでその値を使いましょう.

例

// User.js

export default function User(props) {
  return (
    <div>
      <h1>Hello {props.match.params.user}</h1>
    </div>
  )
}

解説{props.match.params.user} : これはユーザ名( user param )の値にアクセスします.
localhost : 3000/user/YourRange名を訪問すると、こんにちはYourRange名が表示されます.

注意:
このオブジェクトは、コンポーネント= { ...}を使用してコンポーネントをレンダリングする場合にのみ自動的に渡されますレンダリングされません.
を使用して同じ小道具を渡したい場合はpropと同じようにできます:

// App.js

function App() {
  return (
    <div className="App">
      <Nav />
      <Route path="/" exact component={Home} />
      // This way 👇
      <Route path="/contact" exact render={props => <Contact {...props} />} />
    </div>
  )
}

この方法では、プロップを取っているコンポーネントを作成して、それからオブジェクト破壊を使用して、propを加えることによって小道具をコンポーネントに渡すためにオブジェクトを破壊します.
スイッチコンポーネント
あなたが巣ルートを望むならば、スイッチ構成要素は使用されることができて、選択される最初のマッチしたルートを持っているかもしれません.
例を見てみましょう.
インポート

import { Switch } from "react-router-dom"

例

// App.js

function App() {
  return (
    <Switch>
      <Route path="/about" component={About} />
      <Route path="/about/2" component={About} />
      <Route path="/" component={Home} />
    </Switch>
  )
}

解説
これは単に上から下への各ルートを通過し、それがURLの現在のルートと一致するかどうかを確認し、それが最初のマッチを選択し、それをレンダリングを選択します.
はい、あなたは順序で頼るのではなく、正確に追加することによってそれを行うことができます.
あなたがこの必要があるかもしれないあなたのアプリケーションで特別なユースケースがあるかもしれないので、今、あなたはこのオプションが存在することを知っています.
あなたのアプリ、あなたの選択.😉
コンポーネント/保護ルートのリダイレクト
このコンポーネントは、特定の条件が満たされない限りアクセスできないルートがある場合に便利です.
単にリダイレクトコンポーネントをレンダリングすると、自動的に特定のルートに送信されます.
Redirectコンポーネントの一般的な使用例の1つはログインシステムを持っているときです.ログインしていない限り、ユーザーにいくつかのルートにアクセスする必要はありません.
インポート

import { Redirect } from "react-router-dom"

例

// App.js

import React, { useState } from "react"
import Nav from "./components/Nav"
import Home from "./components/Home"
import About from "./components/About"
import Dashboard from "./components/Dashboard"

import { Route, Redirect, Link } from "react-router-dom"

function App() {

  // Simple boolean state
  const [loggedin, setLoggedin] = useState(false) // initialized as false

  const handleLogin = () => {
    setLoggedin(true) // Toggle loggedin state to true
  }

  return (
    <div className="App">
      <Nav />
      <Route path="/" exact component={Home} />
      <Route path="/about" exact component={About} />

      {// Simple protected route 👇}
      <Route
        path="/dashboard"
        exact
        render={() => (loggedin ? <Dashboard /> : <Redirect to="/" />)}
      />

      { // Changes the login state to true 👇}
      <button onClick={handleLogin}>Login</button>

      { // Takes you to /dashboard route 👇}
      <Link to="/dashboard">Dashboard</Link>
    </div>
  )
}

export default App

解説
ここでは、ユーザがログインしているかどうかを表すBoolean状態を持ちます.また、Loggedinの状態をtrueに変更するボタンを持っています.また、ダッシュボードルートに連れて行くためのリンクもあります.
保護されたルートで三項演算子を使用しています.
loggedinがtrueの場合、<Dashboard /> , そうでなければ、<Redirect to="/" /> ユーザがログインしていないので、このルートにアクセスできないようにすぐにユーザを「/」ルートにリダイレクトします.

おめでとう!🎉
このカバーを使用すると、どのように有効にし、あなたの反応アプリでルーティングを使用するだけでなく、反応ルータライブラリが提供する基本的なコンポーネントについて学んだ知っている.

新しい何かを学んだ?
あまりにも恩恵を受けることができる誰かとこのポストを共有します.😄
良い一日を!😇