React学习31（react-router-dom 6.x版本的使用）

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const Users = () => <h2>Users</h2>;
const UsersList = () => <h3>List</h3>;
const UsersEdit = () => <h3>Edit</h3>;
 
function AppRouter() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users" element={<Users />}>
          <Route path="list" element={<UsersList />} />
          <Route path="edit/:id" element={<UsersEdit />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}
 
export default AppRouter;

这个示例展示了如何使用react-router-dom的6.x版本中的<BrowserRouter>、<Routes>和<Route>组件来构建一个简单的路由系统。它包括了嵌套路由（子路由）的使用，并且可以接收动态参数（如:id）。这个示例代码可以直接作为React应用中的一个组件使用，用于定义应用的导航和页面路由。