面试题-React(十八)：一文学会 React Router

一、React Router简介

React Router是一个用于管理React应用中导航和路由的库。它允许开发者在单页面应用（SPA）中创建多个页面，每个页面对应一个不同的URL。React Router的主要特性包括：

• 声明式路由： React Router允许您以声明式的方式定义路由规则，使得路由配置更加直观和易于理解。
• 嵌套路由： 您可以创建嵌套路由，将不同的组件与不同的URL子路径相关联。
• 路由参数： 您可以通过路由参数传递数据，以便在不同页面之间共享信息。
• 导航： React Router提供了Link组件，用于在应用内导航到不同的页面。
• 路由守卫： 您可以使用路由守卫来控制访问权限，例如需要登录才能访问某些页面。

二、安装和配置React Router

要开始使用React Router，首先需要安装它。您可以使用npm或yarn进行安装：

npm install react-router-dom

接下来，您需要在应用中配置React Router。通常，在应用的顶层组件中包装或，以便路由可以正常工作。这里以为例：

import ReactDOM from 'react-dom/client';
import { HashRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    
        
    
);

三、创建和配置路由

在React Router中，路由通常由组件定义。每个组件表示一个URL模式与相应的组件之间的映射。以下是一个示例：

import React from 'react';
import { Route } from 'react-router-dom';

function Home() {
  return 
Home Page
;
}

function About() {
  return 
About Page
;
}

function NotFound() {
  return 
Not Found
}

function App() {
  return (
    

       
          }>
          }>
          }>
       
    
  );
}

export default App;

在上面的示例中，组件用于将URL的根路径（“/”）映射到Home组件，将"/about"路径映射到About组件。*适用于路径找不到时映射到NotFound组件

四、导航

React Router提供了组件，用于在应用内进行导航。以下是一个示例：

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

function Navigation() {
  return (
    

      

        

          Home
        
        

          About
        
      
    
  );
}

export default Navigation;

在上面的示例中，组件用于创建到不同页面的链接。to属性指定目标URL。

五、嵌套路由

在React Router中，如果想要实现嵌套路由，我们可以使用
组件来包裹内部的组件。例如：

function App() {
  return (
    

       
            }>
              }>
              }>
            
            }>
            }>
          
    
  );
}

export default App;

六、路由重定向

在React Router中，通常使用组件实现路由的重定向。以下是一个示例：

import { Routes, Route, Navigate } from "react-router-dom"

function App() {
  return (
    

       
            }>
            }>
              }>
              }>
              }>
            
            }>
            }>
          
    
  );
}

export default App;

在上面的示例中，组件的to属性指定重定向的URL。

七、路由参数

有时，您需要从URL中获取参数以便在组件中使用。React Router允许您通过match对象来访问这些参数。以下是一个示例：

import React from 'react';
import { Route } from 'react-router-dom';

function UserProfile(props) {
  const { match } = props;
  const { username } = match.params;

  return 
Welcome, {username}!
;
}

function App() {
  return (
    

      
    
  );
}

export default App;

在上面的示例中，UserProfile组件可以通过match.params访问URL中的username参数。当然，这里只是举例了一个路由传参的方式，还有更多方式可以参考
React Router官网。