react-router-dom v6 路由表

在 React Router v6 中，路由表的定义方式有所改变。现在可以使用 `<Routes>` 组件来定义路由表，每个路由通过 `<Route>` 组件来定义。以下是一个示例路由表：

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

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

export default App;

在上面的示例中，我们定义了三个路由：`/`，`/about` 和 `/contact`，每个路由都对应一个组件。 `<Routes>` 组件是路由表的根组件，它包含所有 `<Route>` 组件。 `<Route>` 组件的 `path` 属性指定了该路由的 URL 路径， `element` 属性指定了该路由对应的组件。

需要注意的是，`<Route>` 组件没有了 `component` 属性，这是因为在 React Router v6 中，路由组件不再是直接通过 `component` 属性指定，而是通过 `element` 属性指定。使用 `element` 属性可以让路由组件更加灵活，可以是一个组件、一个函数或一个 React 元素。如果需要传递 props 到路由组件，可以使用 `route` 属性，例如：

<Route
  path="/products/:id"
  element={<ProductDetails />}
  route={{ someProp: 'someValue' }}
/>

在 `ProductDetails` 组件中可以通过 `props.route.someProp` 来获取该值。