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;