NodeJS的學習終於接近尾聲，接下來就是要進行實作，為了熟悉剛學完的工具，預計用最後幾天的時間完成一個包含新增、修改、刪除的待辦清單應用程式，以MERN Stack進行開發。

前端應用程式

今天要先從前端下手，在React的應用程式中，是藉由Router與Route的設定切換頁面，因此，首先以create-react-app建立一個新的應用程式，並安裝、引入react-router-dom中的BrowserRouter、Route、Link與Switch。

import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch
} from "react-router-dom";

接著以建立兩個回傳頁面的函式：Home與AddItem，分別作為待辦清單的主頁與新增頁面。

function Home() {
  return (
    <div>
      <h1>待辦清單</h1>
    </div>
  );
}

function AddItem() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);
  console.log(errors);

  return <div className="container">
    <Form className="offset-4 col-4 " onSubmit={handleSubmit(onSubmit)}>
      <Form.Group className="pt-5 mb-3" >
        <input type="text" className="form-control" placeholder="Title" {...register("Title", {required: true, maxLength: 50})} />
      </Form.Group>
      <Form.Group className="mb-3" >
        <textarea  className="form-control"  {...register("Note", {})} />
      </Form.Group>
      <Form.Group className="mb-3" >
        <input type="datetime" className="form-control" placeholder="Date" {...register("Date", {})} />
      </Form.Group>
      <Form.Group className="mb-3" >
        <input type="text" className="form-control" placeholder="#" {...register("#", {})} />
      </Form.Group>
      <Form.Group className="mb-3" >
        <input className="btn btn-success ms-1" type="submit" />
      </Form.Group>
    </Form>
  </div>;
}

頁面完成之後，要進行頁面切換的內容設定，在App函式中，以<Switch>標籤規劃切換內容的空間，並在其中加入<Route>定義切換的頁面Path，在<Route>之下再加入<[Component名稱] />。

function App() {
  return (
    <Router>
      <div className="App">
        <header className="App-header">
          <Switch>
            <Route path="/AddItem">
              <AddItem />		// AddItem function所return的頁面
            </Route>
            <Route path="/">
              <Home />		// Home function所return的頁面
            </Route>
          </Switch>
        </header>
      </div>
    </Router>
  );
}

接著是設定切換頁面的按鈕，在Home函式加入切換AddItem的<Link>，並在AddItem加入返回Home的<Link>，<Link>的屬性to指向切換頁面的Path。

function Home() {
  return (
    <div>
      <h1>待辦清單
        <Link className="ms-5" to="/AddItem">
          <img src={addIcon} className="iconP" alt="add" />
        </Link>
      </h1>
    </div>
  );
}

// AddItem()內加入
<Link className="btn btn-secondary me-1" to="/">取消</Link>

在瀏覽器中執行時的畫面，首頁的跳轉按鈕為綠色的新增Icon，AddItem頁面中的取消按鈕可以返回首頁。

小結

前端頁面的切換是常常使用的功能，沒想到複雜起來這麼難...本來預計要把每個頁面的Component好好切割，礙於時間及React的開發技能還沒能扎實學習，先以單一檔案中的不同函式作為練習。