反応ルータを開始!



反応ルータとは


反応ルータ(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!