react-router-dom v6路由传参

在React Router v6中，路由传参可以通过以下几种方式实现：

1. 使用URL参数传递数据：
在路由路径中使用冒号(:)定义参数，然后在组件中通过`useParams`钩子函数获取参数的值。例如：

   import { BrowserRouter as Router, Routes, Route, Link, useParams } from 'react-router-dom';

   function User() {
     const { id } = useParams();
     return <h2>User ID: {id}</h2>;
   }

   function App() {
     return (
       <Router>
         <nav>
           <ul>
             <li>
               <Link to="/user/1">User 1</Link>
             </li>
             <li>
               <Link to="/user/2">User 2</Link>
             </li>
           </ul>
         </nav>

         <Routes>
           <Route path="/user/:id" element={<User />} />
         </Routes>
       </Router>
     );
   }

   export default App;

当点击链接时，会根据参数的不同显示不同的用户ID。

2. 使用查询参数传递数据：
在URL中使用查询参数传递数据，可以通过`useLocation`钩子函数获取查询参数的值。例如：

   import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';

   function User() {
     const location = useLocation();
     const params = new URLSearchParams(location.search);
     const name = params.get('name');
     return <h2>Hello, {name}</h2>;
   }

   function App() {
     return (
       <Router>
         <nav>
           <ul>
             <li>
               <Link to="/user?name=John">User John</Link>
             </li>
             <li>
               <Link to="/user?name=Jane">User Jane</Link>
             </li>
           </ul>
         </nav>

         <Routes>
           <Route path="/user" element={<User />} />
         </Routes>
       </Router>
     );
   }

   export default App;

当点击链接时，会根据查询参数的不同显示不同的用户名称。

3. 使用状态传递数据：
在React Router v6中，可以使用状态传递数据。通过使用`useNavigate`钩子函数获取导航函数，然后在组件中使用状态来传递数据。例如：

   import { BrowserRouter as Router, Routes, Route, Link, useNavigate } from 'react-router-dom';
   import { useState } from 'react';

   function User() {
     const navigate = useNavigate();
     const [name, setName] = useState('');

     const handleSubmit = (e) => {
       e.preventDefault();
       navigate(`/user/${name}`);
     };

     return (
       <div>
         <form onSubmit={handleSubmit}>
           <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
           <button type="submit">Go</button>
         </form>
       </div>
     );
   }

   function UserDetails() {
     const { name } = useParams();
     return <h2>Hello, {name}</h2>;
   }

   function App() {
     return (
       <Router>
         <nav>
           <ul>
             <li>
               <Link to="/user">User</Link>
             </li>
           </ul>
         </nav>

         <Routes>
           <Route path="/user" element={<User />} />
           <Route path="/user/:name" element={<UserDetails />} />
         </Routes>
       </Router>
     );
   }

   export default App;

当在输入框中输入用户名并点击提交按钮时，会根据输入的用户名显示相应的用户详情。