面试题：React Router高级路由配置与参数传递

Question

假设你有一个React应用，使用React Router进行路由管理。现在要求实现一个动态路由，比如`/user/:id`，当用户访问这个路由时，页面展示对应`id`的用户详细信息。同时，从`/home`页面通过点击一个按钮跳转到这个动态路由页面，并传递一些额外的查询参数。请描述实现这个功能的具体步骤和关键代码逻辑。

Answer 1

1. 设置动态路由：
   • 在React Router配置中添加动态路由。假设使用react - router - dom库，在路由配置文件（比如App.js）中：

   import { BrowserRouter as Router, Routes, Route } from'react - router - dom';
   import UserPage from './UserPage';
   
   function App() {
       return (
           <Router>
               <Routes>
                   <Route path="/user/:id" element={<UserPage />} />
                   <Route path="/home" element={<HomePage />} />
               </Routes>
           </Router>
       );
   }
   
   export default App;
   

2. 在HomePage中添加按钮并处理跳转：
   • 在HomePage.js中：

   import { Link } from'react - router - dom';
   
   function HomePage() {
       const handleClick = () => {
           // 假设要传递的查询参数
           const queryParams = { name: 'John', age: 30 };
           const queryString = new URLSearchParams(queryParams).toString();
           const userId = 1; // 这里假设用户ID，实际可能从数据中获取
           return <Link to={`/user/${userId}?${queryString}`}>跳转到用户详情</Link>;
       };
   
       return (
           <div>
               <h1>Home Page</h1>
               {handleClick()}
           </div>
       );
   }
   
   export default HomePage;
   

3. 在UserPage中获取参数并展示用户信息：
   • 在UserPage.js中：

   import { useParams, useSearchParams } from'react - router - dom';
   
   function UserPage() {
       const { id } = useParams();
       const [searchParams] = useSearchParams();
       const name = searchParams.get('name');
       const age = searchParams.get('age');
   
       // 这里可以根据id从API获取用户详细信息，假设模拟数据
       const userInfo = { id, name, age };
   
       return (
           <div>
               <h1>User Detail</h1>
               <p>User ID: {userInfo.id}</p>
               <p>User Name: {userInfo.name}</p>
               <p>User Age: {userInfo.age}</p>
           </div>
       );
   }
   
   export default UserPage;
   

具体步骤总结：

1. 配置react - router - dom的动态路由。
2. 在HomePage通过Link组件并拼接包含查询参数的URL实现跳转。
3. 在UserPage使用useParams获取动态路由参数，使用useSearchParams获取查询参数，并展示相关信息。