React Router（用法介绍）

React Router 是一个用于在 React 应用中处理路由的库。它允许你定义应用程序中的多个页面，并在 URL 改变时显示不同的内容。

要使用 React Router，你需要首先安装它：

npm install react-router-dom

然后，在你的应用中引入所需的组件和函数：

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams,
  useRouteMatch,
  useHistory,
  useLocation,
  Redirect,
  Prompt
} from 'react-router-dom';

接下来，你可以定义你的路由。下面是一个简单的例子：

function App() {
  return (
    
      

        

          

            

              Home
            
            

              About
            
            

              Users
            
          
        

        {/* A  looks through its children s and
            renders the first one that matches the current URL. */}
        
          
            
          
          
            
          
          
            
          
        
      
    
  );
}

function Home() {
  return 
Home
;
}

function About() {
  return 
About
;
}

function User() {
  let { id } = useParams();
  return 
User: {id}
;
}

在这个例子中：

• 我们创建了一个 Router 组件来包裹我们的整个应用。
• 在导航栏中，我们使用 Link 组件来创建链接到不同页面的按钮。
• 使用 Switch 组件来渲染与当前 URL 匹配的第一个子 Route 组件。
• 对于每个 Route 组件，我们指定了一个路径（path）和一个呈现该路径内容的组件。
• 当访问 /users/:id 路径时，我们可以使用 useParams 钩子从 URL 中获取参数值。

这只是 React Router 的基本用法，实际上它还提供了许多其他功能，如嵌套路由、动态路由匹配等。

嵌套路由

你可以使用 Route 组件的 children 属性来创建嵌套路由。例如：

function Users() {
  return (
    

      
Users
      
        
          
        
        
          
        
      
    
  );
}

在这里，当你访问 /users 时，将显示所有用户列表；当访问 /users/:id 时，将显示单个用户的信息。

动态路由匹配

React Router 允许你在路由路径中使用动态参数。这些参数以冒号 (:) 开头，表示它们可以接受任何字符串。例如：

在这个例子中，:id 是一个动态参数。当访问 /users/42 或 /users/bob 时，都会被匹配并传递给 UserProfile 组件。

路由钩子

React Router 提供了一系列有用的钩子，可以帮助你在组件内部处理路由相关的操作。例如：

• useParams()：从 URL 中提取参数值。
• useRouteMatch()