⭐任務說明

😸 叮咚！今天學習如何使用 React Router！

什麼是 React Router

頁面會依照不同的 URL 顯示內容，這就是路由，
而 React Router 可以讓單頁式應用程式（Single Page Application）
能有不同的 URL 並且切換內容

怎麼用

• 我們會在根元件使用 BrowserRouter 把應用程式包起來

import React from 'react';
import { BrowserRouter } from 'react-router-dom';

export default function App() {
  return (export default
      {/* 其他內容 */}
    </BrowserRouter>
  );
}

• 再來以 Link 的方式建立路由導向的頁面

 <Link to="/about">關於我們</Link>

• 最後是設定 Routes 和 Route
  • Routes：用來包裝一組路由的設定
  • Route：每一個 Route代表的是獨立的路由，而 path 指的是路徑，element 會指向一個元件

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<Navigate to="/" />} />
      </Routes>

結語

React Router 在不同版本有不同的寫法，這次是直接學習新版本！下個任務見囉！