反応ルータを開始!

反応ルータとは

反応ルータ(RR)は、あなたの反応アプリケーションのルートを作成するために使用されるライブラリです.ああ、いいえ、それは事前にあなたの反応プロジェクトにインストールされていない-あなたはそれを使用してインストールする必要がありますnpm install react-router-domあなたは、あなたが指定するどんな行動によって、あなたを新しいページにあなたに送るウェブアプリに遭遇したでしょうか
このポストでは、RRがどのように動作するか、どのようにルーティング用のプロジェクトで使用できるかを学ぶことになります.
Router Routerは強力で効率的です.なぜなら、あなたのコードをlazily、動的ルートマッチング、位置遷移の構築、ルートネスト、インデックスルーティングなどをロードする機能を持っているからです.
右にジャンプし、この強力なライブラリを使用する方法を学びましょう.

前提条件

ノード:ノードをインストールする必要がありますinstalled あなたのコンピュータで.

反応する知識を持っている

始めましょうか。

を使用して反応アプリを作成することから始めましょうcreate-react-app CLInpx create-react-app learn-react-router我々の反応アプリが正常にインストールされていることを確認します.
今、反応ルータをインストールしましょう
ドゥnpm install react-router-domうん、おめでとう.あなたは、ちょうど反応ルータで働く最初のステップを通過しました.
SRCフォルダ内のルートフォルダを作成し、そこにコンポーネントを持つことができます.
クリエイトUsers.js ファイルは、このような単純なテキストを含める.

// => Users.js
import React from 'react'


export default function Users() {
  return (
    <div>
        <h1>Welcome to Users route </h1>

    </div>


  )
}

を作成しましょうPost.js 同じルートフォルダ内のファイル

// => Posts.js
import React from 'react'


export default function Posts() {
  return (
    <div>
        <h1>Welcome to Posts route</h1>

    </div>


  )
}

ホールドアップ!私はあなたのアプリを実行している場合は、それを実行して取得しないnpm startそれは我々のルートを反応ルータを使用して航行できるようにする時間です.
に移動index.js ファイル

// => index.js

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Users from './routes/Users';
import Posts from './routes/Posts';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />} >
         <Route path="users" element={<Users/>} />
         <Route path ="posts" element={<Posts />} />
          <Route path="*" element={<h1>Route does not 
            exist</h1>}/>
      </Routes>
  </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

あなたがlocalhost:3000/users あなたは、私たちがテキストを中で指定したので、あなたがユーザールートにテキスト歓迎を見つけるユーザーページに連れて行かれますUsers.js . もちろん、あなたもポストルートに移動することができますlocalhost:3000/posts .
おっ!おっ!おっ!私はちょうどあなたが言うBrowserRouter, Routes and Route ?
私はそれについてとても残念です、私は全くあなたを悩ませるつもりはありませんでした-私は、彼らについて説明しようとしていました.BrowserRouter . ちょっと待ってください.こう言う必要があります.
「これは、特定の主題を理解するのを助けて、ドキュメンテーションでないブログ柱です」
言うまでもなく、私はおそらく、documentation .
私がEMMの前に言っていたものに戻ってください..蚊が止まった.BrowserRouter 「この人はルートを作ろうとしている」というアナウンス
しかし、あなたは正確にBrowserRouterの家を所有することができません(それが都市を持っていると思ってください)市長があなたに前進を与えることなく.Routes 市長です.あなたのそれぞれを置く必要がありますRoute インサイド.Route 指定しなければならない2つのパラメータが必要です.element : これは、“私はあなたが道を打つときにどこにドライブする必要があります.”ここの道はpath . ドライブする場所は通常、コンポーネントです.path : これはあなたの目的地(コンポーネント)につながる道です!
あれ?はい!path="*" 何ですか.
ああ、ほとんど忘れてしまった.これはユーザリクエストが存在しない場合にのみ呼び出されます.この場合、「ルートが存在しない」と言いました
あなた自身のために見たいですか?わかりましたlocalhost:3000/home . それは何を言ったya?
今すぐあなたがそれを得る!
Hollupインストラクター!ユーザーが何かをクリックすると、特定のルートにリンクできますか?
スマート学生!あなたは、単にそれをリンクします.それをしましょう.

// => App.js

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

export default function App() {
  return (
    <div>


        <h1>Welcome to the HOMEPAGE</h1>


        <Link to="/users">
             <p>go to users page</p>
       </Link> 

    </div>
  )
}

私が何かをインポートしたことに注意してくださいLink からreact-router-dom を指定し、to="" , リンクがどこにあるか<p>...</p> をクリックします.
自分でテストしてください.イェヤハハハル!その作業-私はここからあなたの興奮を感じることができます.
私は可能な限り基本としてこれを維持したい、私はあなたをオーバーロードしたくない.それぞれの口の味を感じて欲しい.
つの最後の事、私は約束!

入れ子ルート

公式文書にはネストしたルートのことが書かれています:
“これは反応ルータの最も強力な機能の1つは、複雑なレイアウトのコードで混乱を回避する必要はありません.あなたのレイアウトの大部分は、URLのセグメントに結合されており、ルータは、この完全に抱擁反応します.
ルートは互いに入れ子になっていて、そのパスはネストすることができます(親は継承します)."
これは私が言わなければならないことです:あなたがこのようなことをしたいlocalhost:3000/users/name . 入れ子ルートでは、それを達成することができます.
我々のインデックスに行きましょう.これをするJSファイル.しかし、その前にName.js ルートフォルダ内のファイル.あなたはJSXを書くべきです-「これは、名前ルートです、そして、それはユーザー(親)ルートの中に現れます」、あるいは、何か

// => index.js

...

<Route path="users" element={<Users />} >
    <Route path="name" element={Name />} />
</Route>
...

あなたは単に親のルートの中に子供のルートをネストします.
これをインポートするにはOutlet 親のルートに.

// => Users.js
import React from 'react'
import {Outlet} from 'react-router-dom'


export default function Users() {
  return (
    <div>
        <h1>Welcome to Users route </h1>

    </div>
    <Outlet />


  )
}

それをテスト!名前ルートをナビゲートlocalhost3000/users/nameHurrayyyyyy!