1. React Router簡介

React Router 是一個用於在 React 應用程式中處理路由的函式庫。它允許您的應用程式在不同的元件和視圖之間導航，而無需重新載入整頁，從而實現無縫的用戶體驗。

2. 基本設定

先安裝react-router-dom：

npm install react-router-dom

使用 BrowserRouter、Routes 和 Route 設定基本路由：

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

const Home = () => 
Home
;
const About = () => 
About
;

const App = () => {
  return (
    } />
        } />
      
  );
};

export default App;

3. 嵌套路由

對於更複雜的應用程序，您可以嵌套路由。以下是如何在父元件中設定嵌套路由：

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

const Dashboard = () => 
Dashboard Home
;
const Profile = () => 
Your Profile
;

const DashboardLayout = () => {
  return (
    

      } />
        } />
      
  );
};

const App = () => {
  return (
    } />
      
  );
};

export default App;

4. 動態路由

動態路由可讓您在 URL 中傳遞參數。以下是定義和存取動態路由的方法：

import { useParams } from 'react-router-dom';

const User = () => {
  const { id } = useParams();
  return 
User ID: {id}
;
};

const App = () => {
  return (
    } />
      
  );
};

export default App;

5. 受保護的路由

要實現受保護的路由，您可以建立自訂 PrivateRoute 元件：

import { Navigate, Outlet } from 'react-router-dom';

const useAuth = () => {
  const user = { loggedIn: true }; // Replace with actual auth logic
  return user && user.loggedIn;
};

const PrivateRoute = () => {
  const isAuth = useAuth();
  return isAuth ?  : ;
};

const App = () => {
  return (
    } />
        }>
          } />
        
      
  );
};

export default App;

6. 程序化導航

有時，您可能希望以程式設計方式導航，例如在提交表單後。在 React Router v6 中使用 useNavigate 鉤子：

import { useNavigate } from 'react-router-dom';

const Login = () => {
  const navigate = useNavigate();

  const handleLogin = () => {
    // Login logic here...
    navigate('/dashboard');
  };

  return (
    

      
Login
      Login
    
  );
};

export default Login;

7. 404頁

透過建立包羅萬象的路由來處理 404（未找到）錯誤：

const NotFound = () => 
404 - Page Not Found
;

const App = () => {
  return (
    } />
        } />
        } />
      
  );
};

export default App;

8. 性能考慮因素

對於大型應用程序，延遲載入路由可以提高效能。以下是如何使用 React.lazy() 和 Suspense 實作延遲載入：

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

const App = () => {
  return (
    Loading...}>
        } />
          } />
        
  );
};

export default App;