react路由版本6封装

React Router v6 提供了更加简单和灵活的 API，可以更好地支持重用和组合路由。

以下是一个示例代码，演示如何在 React Router v6 中封装路由：

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

// 封装组件
const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;
const Contact = () => <h1>Contact</h1>;

// 封装路由
const AppRoutes = () => {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
    </Routes>
  );
};

// 封装应用
const App = () => {
  return (
    <Router>
      <AppRoutes />
    </Router>
  );
};

export default App;

这个示例中，我们首先定义了三个简单的组件：Home、About 和 Contact。然后，我们通过 `<Routes>` 组件将它们映射到不同的 URL 路径上。

最后，我们将 `<AppRoutes>` 组件嵌套在 `<Router>` 组件中，以便应用程序可以使用 React Router 进行导航。

通过这种方式，我们可以更加灵活地组合和重用路由组件，从而使应用程序更加可维护和易于扩展。