ReactRouter v6升级的步骤

React Router v6 引入了一个 Routes 组件，它有点像 Switch ，但功能要强大得多。与 Switch 相比， Routes 的主要优势在于：

•  中的所有  和  都是相对的。这导致在  和  中的代码更精简和更可预测。
• 路由的选择基于最佳匹配，而不是按顺序遍历。这避免了由于在  中定义较晚而导致无法到达的错误。
• 路由可以嵌套在一个地方，而不是分散在不同的组件中。在中小型应用程序中，这样可以方便地一次性查看所有路由。在大型应用程序中，您仍然可以通过 React.lazy 动态加载将路由嵌套在打包中。

  v6，您需要将所有  元素转换为  。

  首先，让我们来谈谈 v6 中的相对路由和链接。

  v5 是这样写：

  // This is a React Router v5 app
  import {
    BrowserRouter,
    Switch,
    Route,
    Link,
    useRouteMatch,
  } from "react-router-dom";
  function App() {
    return (
      
        
          
            
          
          
            
          
        
      
    );
  }
  function Users() {
    // In v5, nested routes are rendered by the child component, so
    // you have  elements all over your app for nested UI.
    // You build nested routes and links using match.url and match.path.
    let match = useRouteMatch();
    return (
      
        
          My Profile
        
        
          
            
          
          
            
          
        
      
    );
  }

  v6需要这个样子：

  // This is a React Router v6 app
  import {
    BrowserRouter,
    Routes,
    Route,
    Link,
  } from "react-router-dom";
  function App() {
    return (
      
        
          
          
        
      
    );
  }
  function Users() {
    return (
      
        
          My Profile
        
        
          
          
        
      
    );
  }

  v5 应用程序中的所有  在 v6 中都变为了 

  对于子路由，index设置为true时，相当于一个默认的子路由

  关于  模式的注意事项​

  React Router v6 使用简化的路径格式。在 v6 中，  只支持两种占位符：动态 :id 样式的参数和 * 通配符。 * 通配符只能在路径末尾使用，不能在中间使用。

  /groups

  /groups/admin

  /users/:id

  /users/:id/messages

  /files/*

  /files/:id/*

  在 v6 中，无论当前 URL 如何，  都会呈现相同的  。 

  使用useRoutes代替react-router-config​

  v5 版本的 react-router-config 包中的所有功能都已移至 v6 的核心中。如果您喜欢/需要将路由定义为 JavaScript 对象，而不是使用 React 元素，那么您一定会喜欢这个功能。

  function App() {
    let element = useRoutes([
      // These are the same as the props you provide to 
      { path: "/", element:  },
      { path: "dashboard", element:  },
      {
        path: "invoices",
        element: ,
        // Nested routes use a children property, which is also
        // the same as 
        children: [
          { path: ":id", element:  },
          { path: "sent", element:  },
        ],
      },
      // Not found routes work as you'd expect
      { path: "*", element:  },
    ]);
    // The returned element will render the entire element
    // hierarchy with all the appropriate context it needs
    return element;
  }

  使用useNavigate代替useHistory​

  React Router v6 引入了新的导航 API，该 API 与  同义，可更好地兼容启用了悬念的应用程序。根据您的风格和需求，我们提供了该 API 的命令式和声明式版本。

  useHistory 更改为 useNavigate ，并更改 history.push 或 history.replace 调用站点。

  // This is a React Router v6 app
  import { useNavigate } from "react-router-dom";
  function App() {
    let navigate = useNavigate();
    function handleClick() {
      navigate("/home");
    }
    return (
      
        go home
      
    );
  }

  注意：请注意，v5 版  默认使用 replace 逻辑（可通过 push 属性进行更改），而 v6 版  默认使用 push 逻辑，可通过 replace 属性进行更改。