react-router-dom v6 配置试路由使用

React Router v6 与 v5 的用法略有不同。下面是一个基本的路由配置示例：

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

在这个例子中，`BrowserRouter` 组件用于包裹整个应用，`Routes` 组件是一个容器，用于呈现我们的路由。我们通过 `Route` 组件来定义路由，每个路由都有一个 `path` 属性和一个 `element` 属性。`path` 属性用于匹配 URL，`element` 属性用于渲染对应的组件。

当你访问 `/` 路径时，应用将会渲染 `Home` 组件。当你访问 `/about` 路径时，应用将会渲染 `About` 组件。

如果你想定义嵌套路由，可以使用 `Routes` 组件的 `children` 属性，例如：

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Profile from './Profile';
import Settings from './Settings';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/profile" element={<Profile />}>
          <Route path="/settings" element={<Settings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

在这个例子中，我们定义了一个嵌套路由，`/profile` 路径下可以访问 `Profile` 组件。当你访问 `/profile/settings` 路径时，应用将会渲染 `Settings` 组件。