[react]符号化されていない映画Webサービス作成6.2構築ナビゲーション

ナビゲーションはルータに関する用語を初めて聞いたと思いますが、ナビゲーションバーといえばナビゲーションに気づきました.
私たちは1つの溝と2つのボタンを作るつもりです.
まずはNavigation新しいjsの作成<a>Home</a>および<a>about</a>を返す関数型要素を作成します.

質問する

<a>タグを使用する場合、ホームをクリックするとリフレッシュされます.これはSPAがあまり見たくない状況です.

解決する

だからlinkを導入することにしました.

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

return(
   <div>
     <Link to="/">Home</Link>
     <Link to="/about">About</Link>
   </div>
);

🧭 ナビゲーション:2つのことを覚えます

ルータ外でリンク

を使用できない.

すべてのコンテンツをルータに書き込む必要はありません=リンクを書き込む必要はありません
Putterのように他のページに直接移動する場合は、Routerのみ使用できます.このとき、ルータの外でFragment <>...</>を1回上書きします.

ちなみに、ルータにはハッシュルータのほかにブラウザもありますが、ドメインにShopを追加することはありません.しかし、今回書いた理由は、ブラウザがgh-pagesに書き込むのが不便だからです.

コード最終

// ***Navigation.js***
import React from 'react';
import {Link} from 'react-router-dom';
function Navigation (){
  return(
    <div className="routes">
       <button className="Home route">
         <Link to="/">Home</Link>
       </button>
       <button className="About route">
         <Link to="/about">About</Link>
       </button>
    </div>
  )
}
export default Navigation;

// ***App.js***
import React from 'react';
import {HashRouter, Route} from "react-router-dom";
import Home from "./routes/Home";
import About from "./routes/About";
import Navigation from "./components/Navigation";
function App(){
  return(
  <HashRouter>
    <Navigation />
    <Route path="/" exact={true} component={Home} />
    <Route path="/about" component={About} />
  </HashRouter>
  ) 
}
export default App;

CSS

授業が終わったら、自分が造形をしたときに修正したものを記録したいです.
アプリケーション.jsに入れてあるので、ロード中にもhome/arborボタンが見えますが、担当背景のdivサイズが異なることはよく知られていますが、真ん中に並んでいるhome/arborボタンが少し横に移動すると、アプリケーションがhomeを削除して削除します.js({isLoading?(‥):(<div>‥<Navigation />)})とAbout.それぞれjsに入れて、とてもきれいに見えます.

リンクはhtmlからaタグに入るため、aタグを使用して選択することができる.

ここまでです.