反応:ルーター

[参考文献:Doit!クローンコード映画採点Webサービス]

ルーター

ルータを使用して、ムービースコアWebサービスにナビゲーション機能を追加します.ルータは、ユーザが入力したURLを介して特定のコンポーネントをロードする.たとえば、ユーザーが「localhost:3000/home」と入力した場合、ホームコンポーネントがロードされ、「localhost:3000/about」と入力した場合、Aboutコンポーネントがロードされます.
まず、ルータを使用するためにreact-router-domパッケージをインストールする必要があるので、端末に次のコマンドを入力します.

npm install react-router-dom

インストールされているreact-router-domは、複数のルータを提供します.ムービースコアWebサービスでは、HashRouterとRouteコンポーネントを使用します.
App.jsにHashRouterおよびRoute構成部品をインポートし、アプリケーションがHashRouterを囲み、Route構成部品に戻ります.jsを作成します.

//App.js

import React from 'react';
import './App.css';
import { HashRouter, Route } from 'react-router-dom'; // HashRouter, Route 컴포넌트 임포트

function App(){
  return (
    <HashRouter>
      <Route/>
    </HashRouter>
  ); 
}

export default App;

このように書くと、実行している既存のアドレスに#/が付けられます.これはHashRouterのためです.

これで、Routeに予め作成されたホームエレメントとAboutエレメントが追加されます.Routeに渡すプロパティには、URL用のpathプロパティと、ロードする構成部品を入力するcomponentプロパティがあります.

//App.js

import React from 'react';
import './App.css';
import { HashRouter, Route } from 'react-router-dom';
import About from './routes/About';
import Home from './routes/Home';

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

export default App;

このように記述すると、localhost:3000に接続されると、アドレスの後ろに自動的に/#/が付加され、ホーム素子が出力されます.そして、アドレスの後ろにaboutを入力するとAbout素子が出力されるが、同時にHome素子が出力される.これはルータがURLを探す方法のためです.
たとえば、ユーザーがlocalhost:3000/A/Bに接続されている場合、ルータは/、/A、/A/Bの順にpathプロパティを検索します.したがって、localhost:3000/aboutに接続すると、HashRouterのRouteで作成した2つのpathがルータで検索されるため、両方のコンポーネントが描画されます.これはRoute素子にexact属性を追加することで解決できる.

//App.js

import React from 'react';
import './App.css';
import { HashRouter, Route } from 'react-router-dom';
import About from './routes/About';
import Home from './routes/Home';

function App(){
  return (
    <HashRouter>
      <Route path="/" exact={true} component={Home}></Route>
      <Route path="/about" component={About}></Route>
    </HashRouter>
  );
}

export default App;

このようなexcept={true}を追加すると、Home構成部品はパスが正しい場合にのみ出力されます.
新しいナビゲーション構成部品を作成し、HashRouterに追加します.

//Navigation.js

import React from 'react';
import {Link} from 'react-router-dom';
import './Navigation.css';

function Navigation(){
    return (
        <div className="nav">
            <Link to="/">Home</Link>
            <Link to="/about">About</Link>
        </div>
    );
}

export default Navigation;

react-router-domのリンクコンポーネントが使用されていない場合、ホーム、Aboutコンポーネントに切り替えるたびにページがリフレッシュされます.<=「」>タグにリンクするのはhtmlの与同样。//App.js import React from 'react'; import './App.css'; import { HashRouter, Route } from 'react-router-dom'; import About from './routes/About'; import Home from './routes/Home'; import Navigation from './components/Navigation'; function App(){ return ( <HashRouter> <Navigation /> <Route path="/" exact={true} component={Home}></Route> <Route path="/about" component={About}></Route> </HashRouter> ); } export default App;これにより、ナビゲーションの構成部品をAppの構成部品に流し込み、HashRouterの間に含む場合、以下のナビゲーション機能を使用することができる.