大綱

1. 新增資料夾和檔案
2. React Routes設定

1. 新增資料夾和檔案

我們先調整當前專案的資料夾，新增一些資料夾來區分檔案。

專案資料夾結構

✨表示是新增的資料夾

📁blog-frontend/
    📄README.md     
    📁node_modules/
    📄package.json
    📁public/
        📄index.html
        📄favicon.ico
    📁src/
        ✨📁assets/
        ✨📁components/
        ✨📁contexts/
        ✨📁pages/
        ✨📁layout/
        ✨📁hooks/
        📄App.css
        📄App.js
        📄App.test.js
        📄index.css
        📄index.js
        📄logo.svg

資料夾功能說明

• src：文件夾裡面有所有JavaScript，CSS和圖像文件，這些文件會被編譯成bundle，然後加到index.html中
• assets： 存放應用程式使用的靜態資源，如圖片、icon、字體等。
• components： 存放UI components，像button、form等，可在專案中的各種檔案中使用。
• contexts： 該資料夾儲存跨多個頁面使用的所有 React context（context：React 提供的一種用於在元件之間共享數據的方法，而無需手動通過props 一級一級地傳遞數據。）
• pages：表示react應用程式的路徑和頁面，例如：首頁、登入頁等，通常會由多個components組成。
• layout：存放佈局元件，像header、navbar、footer等。
• hooks：擺放custom hooks。

頁面檔案建立

我們在pages folder底下建立頁面檔案

📁pages/
 - 📄 Home.js       //首頁
 - 📄 Login.js      //登入頁
 - 📄 Register.js   //註冊頁

//Home.js
const HomePage = props =>{
    return <div>Home Page</div>
}
export default HomePage;

//Login.js
const LoginPage = props =>{
    return <div>Login Page</div>
}
export default LoginPage;

//Register.js
const RegisterPage = props =>{
    return <div>Register Page</div>
}
export default RegisterPage;

2.Routes設定

還記得我們先前有安裝react-router-dom，這次就要來使用它來設定我們頁面的路由。
詳細說明請見React Router

//App.js

import './App.css';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Home from './pages/Home';
import Login  from './pages/Login';
import Register from './pages/Register';

const router = createBrowserRouter([
  {
    path: '/home', 
    element: <Home/>,
  },
  {
    path: '/login', 
    element: <Login/>,
  },
  {
    path: '/register', 
    element: <Register/>,
  }
])

const App = () => {
  return (
      <RouterProvider router={router}/>
  );
}

export default App;

設定完成後，我們輸入 npm start啟動當前程式，並在瀏覽器的網址輸入
http://localhost:3000/login
http://localhost:3000/home
http://localhost:3000/register

就會看到對應的頁面了

參考資料

https://www.xenonstack.com/insights/reactjs-project-structure
https://profy.dev/article/react-folder-structure