react-router-dom v6 路由配置对象写法

在 React Router v6 中，路由配置对象的写法与 v5 有所不同。以下是一个示例：

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
import NotFound from "./components/NotFound";

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

export default App;

注意，我们使用了新的 `<Routes>` 组件来包含我们的路由配置，而不是以前的 `<Switch>` 组件。每个路由都是通过 `<Route>` 组件来定义的，其中 `path` 属性指定了路由路径，`element` 属性指定了要呈现的组件。`<Route>` 组件也可以包含子路由，可以通过嵌套 `<Route>` 组件来实现。

另外需要注意的是，v6 中的路由配置对象不再包含 `<Redirect>` 组件，而是通过在 `<Route>` 组件中使用 `navigate` 方法来实现重定向。