React-Router-Dom v6版本与酷游连结旧版的差异范例

React Router Dom v6 版本与之前的版本在API和使用方式上有很大的变化。以下是一个简单的路由定义示例，展示了如何在v6版本中使用新的<Routes>和<Route>组件来替换旧版中的<BrowserRouter>和<Switch>。

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 
// 假设有两个页面组件：Home和About
function Home() {
  return <h2>Home Page</h2>;
}
 
function About() {
  return <h2>About Page</h2>;
}
 
// 应用的根组件
function App() {
  return (
    <Router>
      <div>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          {/* 还可以嵌套更多的<Route>定义 */}
        </Routes>
      </div>
    </Router>
  );
}
 
export default App;

在这个示例中，我们使用<Router>作为顶级路由组件，它现在只能有一个子元素。然后我们使用<Routes>来包裹所有的路由规则，每个<Route>定义一条路由规则，使用path属性指定路径，使用element属性指定当路径匹配时要渲染的组件。

这个示例展示了如何用React Router Dom v6 创建简单的路由，并且如何使用<Route>组件来定义路由。在实际应用中，你可能还需要使用<Outlet>组件来定义嵌套的子路由。