React 路由的基本設置

前言題要

關於如何建立新 React 檔案：

關於如何在 React 使用 TailwindCSS：

在 React 專案中輕鬆使用 TailwindCSS | React 學習筆記

正題

建立完專案與引入 TailwindCSS 後，會發現當使用 React 構建單頁應用程序時，路由非常重要，因為它允許使用 URL 去導航到不同的頁面或視圖。在 React 中，可以使用一些庫，如 React Router 來配置路由。

以下是一些使用 React Router 配置路由的步驟：

$ npm install -D react-router-dom@next

# or

$ yarn add -D react-router-dom@next

接下來，導入所需的頁面元件，這邊以 Home、Projects、About 三個作為範例：

// Add
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Projects from './pages/Projects';
import About from './pages/About';

然後，在應用程序中，使用 <BrowserRouter> 元件包裹所有路由，並使用 <Routes> 元件配置路由：

function App() {
  return (
    <BrowserRouter>
      <Navbar />
      <div className="container mx-auto px-4 pt-5">
        <Routes>
          <Route exact path="/" element={<Home />} />
          <Route path="/projects" element={<Projects />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

最後，在 ./pages 目錄下，創建 Home.js、Projects.js 和 About.js 頁面元件：

/* Home.js */
import React from 'react';

function Home() {
  return (
    <div>
      <h1>Welcome to my pages!</h1>
      <p>Here you can learn more about me and my projects.</p>
    </div>
  );
}

export default Home;

/* Projects.js */
import React from 'react';

function Projects() {
  return (
    <div>
      <h1>My Projects</h1>
      <ul>
        <li>Project 1</li>
        <li>Project 2</li>
        <li>Project 3</li>
      </ul>
    </div>
  );
}

export default Projects;

/* About.js */
import React from 'react';

function About() {
  return (
    <div>
      <h1>About Me</h1>
      <p>Here you can learn more about me and my background.</p>
    </div>
  );
}

export default About;