導入

どのようなルートですか？

ルートは単に特定の経路です.クラスの後に家に帰るように、あなたは家に着くために特定の経路を使用すると決めるかもしれません.同様にルートは、我々の目的地に我々を連れて行きます.
反応して、我々は異なるインターフェースまたはビューを表示するためにユーザーによって特定の時間または行動で表示したいいくつかのコンポーネントを持っているかもしれません.この場合、ルートは重要な役割を果たす.
このポストでは、我々は3つのコンポーネント(家、については、連絡先)、単純なルートを使用して、これらの別のコンポーネントに移動する単純な反応アプリを作成するつもりです.

1 .反応アプリの作成:

Npxを使うつもりです.

npx create-react-app my-app
cd my-app
npm start

アプリ構造

2 .さまざまなコンポーネントを作成する

ここで、srcフォルダに「コンポーネント」というディレクトリを作成し、すべてのコンポーネントを配置します.

アバウト.JS

ホーム.JS

は連絡します.JS

ナインバー.JS

フッター.JS

今のところデータを渡さないので、stateless ( function )コンポーネントを使用します.
サンプルのNavbar.jsファイルは次のようになります.

import '../App.css';

let Nav =()=>{
    return (
        <div>
            <nav>
            <div className ='logo'>
                <p>Logo</p>
            </div>
            <div>
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
            </div>
            </nav>
        </div>
    )
}

export default Nav

レスポンスルータDOMをインストールします。

npm install react-router-dom

あなたがアプリケーションで作成したすべてのコンポーネントをインポートします。jsファイル

import "./App.css";
import Nav from "./components/nav";
import Footer from "./components/footer";
import About from "./components/about"
import Home from "./components/home"
import Contact from "./components/contact"

5 .あなたのNAVとフッターコンポーネントをJSXに追加する

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

  );
}

NAVコンポーネントでは、Agent RouterモジュールからインポートNavLinkとNavlinkタグでアンカータグを交換します。to属性は必要なルートを指し示す必要があります。EG :

ホームコンポーネントのための'/'と' home '
コンポーネントについて
連絡先コンポーネントの\/contact '.

import {NavLink} from 'react-router-dom';

<nav>
    <div className ='logo'>
        <p>Logo</p>
    </div>
    <div>
        <ul>
            <li><NavLink to = '/home'>Home</NavLink></li>
            <li><NavLink to = '/about'>About</NavLink></li>
            <li><NavLink to = '/contact'>Contact</NavLink></li>
         </ul>
    </div>
</nav>

7 .反応ルータDOMアプリケーションからBrowserRouterとルートをインポートします。js

import { BrowserRouter, Route } from "react-router-dom";

6 .アプリに戻るdivをラップします。BrowserRouterタグのJSコンポーネント。その後、各タグを指定するには、ルートタグに使用します。

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Nav />
        <Route exact path = '/' component = {Home}></Route>
        <Route  path = '/home' component = {Home}></Route>
        <Route  path = '/about' component = {About}></Route>
        <Route  path = '/contact' component = {Contact}></Route>
        <Footer />
      </div>
    </BrowserRouter>
  );
}

7 .保存とリフレッシュでスクリプトを実行します。

npm start

この表示が必要です.

Githubレポへのリンクは、ここにあります.これは、すべてのコードと同様にCSSファイルが含まれます.してくださいあなたのコメントやtaghtsを残してください.感謝
Github repo

次は反応経路を実装します（第2部-使用Navinkとリンクタグでない理由）