今天終於要來實作第一個功能－設置 route 讓 blog 可以自由切換頁面。

今天的 css

為了更好的設置 route 且讓你的 blog 更有彈性，所以我們將改變檔案架構

首先先給一個範例：

--index.js        --app.js        --Home.js
            (這邊配置route)        --About.js
                                  --Notes.js
                                   (其他頁面)

按照上面的配置，我們將把原本放在 app.js 的部分 component 放進 Home.js。

而部分不會隨著頁面改動的 (navbar、footer) 將繼續留在 app.js。

這樣就其餘 component 就可以隨著 path 的變動來顯示不同的畫面。

聽起來還不是很清楚嗎，那就實作吧！

首先在 src/ 底下設置 pages 這個資料夾

創建 3 個檔案 home、about、notes ，各自做上描述後把它們放進 pages，像這樣：

import React from "react";
export default function Notes() {
  return (
    <section className="tempbody">
      <h1>Notes Page</h1>
    </section>
  );
}

接著把除了 navbar 和 footer 之外的 component 拉進 home.js。

記得那些 import 也要喔，路徑也要改一下。

// home.js

import React from "react";
import InfoBoard from "../components/InfoBoard";
import FeaturedBoard from "../components/FeaturedBoard";
import Banner from "../components/Banner";
import Article from "../components/Article";
import SkillBoard from "../components/SkillBoard"
import pic from "../images/side1.jpg";
import pic2 from "../images/side2.jpeg";

export default function Home() {
    let article =["Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium ante erat, vitae sodales mi varius quis. Etiam vestibulum lorem vel urna tempor, eu fermentum odio aliquam. Aliquam consequat urna vitae ipsum pulvinar, in blandit purus eleifend."]
    
    const skill =['Lorem ipsum dolor sit amet','Lorem ipsum dolor sit amet','Lorem ipsum dolor sit amet']
  
  return (
    <div>
      <FeaturedBoard title="FeaturedBoard" className="title">
        <Banner article={article} />
      </FeaturedBoard>
      <InfoBoard pic={pic}>
        <Article article={article} title="About Me" className="subtitle" />
      </InfoBoard>
      <SkillBoard pic={pic2}>
        <Article article={skill} title="Skill" className="subtitle" />
      </SkillBoard>
    </div>
  );
}


// app.js

import React from "react";
import "./App.css";
import Footer from "./components/Footer";
import Navbar from "./components/Navbar";
import Home from "./pages/Home"

export default function App() {
  return (
    <div>
      <Navbar />
      <Home />
      <Footer />
    </div>
  );
}

如果覺得怕會有錯的人直接複製好了，可是還是要手打比較有記憶感啦。

接著我們看一下能不能 work

一切正常，接下來配置路徑吧

首先，在 app.js import 3 個 page。

import React from "react";
import "./App.css";
import Footer from "./components/Footer";
import Navbar from "./components/Navbar";
import Home from "./pages/Home";
import About from "./pages/About";
import Notes from "./pages/Notes";

export default function App() {
  return (
    <div>
      <Navbar />
      <About />
      <Notes />
      <Home />
      <Footer />
    </div>
  );
}

然後使用 react-router-dom 設置路徑，就像這樣：

import React from "react";
import "./App.css";
import Footer from "./components/Footer";
import Navbar from "./components/Navbar";
import Home from "./pages/Home";
import About from "./pages/About";
import Notes from "./pages/Notes";
import { Route, Switch } from "react-router-dom";
export default function App() {
  return (
    <div>
      <Navbar />
      <Switch>
        <Route path="/About" component={About} />
        <Route path="/Notes" component={Notes} />
        <Route exact path="/" component={Home} />
      </Switch>
      <Footer />
    </div>
  );
}

可以看到多個 Route 被 switch 所包起來，至於不包會怎樣，可以試試看阿 :P

沒啦，如果不包起來，且同時有多組路徑符合網頁上的路徑，就會一次性出現這一堆頁面，所以 Switch 這個 component 會保證只有第一個符合條件的路徑可以被 render 出來。

至於 Router 裡面包的那個參數 exact 就是確保了只有嚴格符合該路徑才會被 render 出來，不然所有路徑都含有根目錄，不使用 exact 的話根目錄不管甚麼局都要跟了，超夯。

那馬上就來測試看看吧。

成功惹~ 這邊我只截一個就好了，另一個差不多。

今天我們設置好了路徑，並簡易實作了其餘兩個畫面，信心大增！

我是 Chris，明天將實作其他畫面，不過上班好累喔，好想偷懶嗚嗚。