面试题：React中通过params方式在路由间传参的具体实现步骤

Question

在一个React应用中，使用React Router进行路由管理。假设有两个页面PageA和PageB，现在需要从PageA通过params方式向PageB传递一个id参数，详细描述实现这个过程的代码步骤，包括路由配置和页面间参数传递的代码。

Answer 1

1. 安装React Router

确保项目中安装了 react-router-dom，如果没有安装，可通过以下命令安装：

npm install react-router-dom

2. 路由配置

在路由配置文件（通常是 App.js 或类似的主文件）中进行如下配置：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import PageA from './PageA';
import PageB from './PageB';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/pageA" element={<PageA />} />
        <Route path="/pageB/:id" element={<PageB />} />
      </Routes>
    </Router>
  );
}

export default App;

这里，定义了两个路由，/pageA 对应 PageA 页面，/pageB/:id 表示 PageB 页面接受一个名为 id 的参数。

3. PageA页面传递参数

在 PageA 组件中，通过 Link 组件或 navigate 方法传递参数：

import { Link } from'react-router-dom';

function PageA() {
  const id = 123; // 假设要传递的id值
  return (
    <div>
      <Link to={`/pageB/${id}`}>Go to PageB</Link>
    </div>
  );
}

export default PageA;

这里使用 Link 组件，将 id 拼接到目标路径中，实现参数传递。如果使用 navigate 方法，代码如下：

import { useNavigate } from'react-router-dom';

function PageA() {
  const navigate = useNavigate();
  const id = 123;
  const handleClick = () => {
    navigate(`/pageB/${id}`);
  };
  return (
    <div>
      <button onClick={handleClick}>Go to PageB</button>
    </div>
  );
}

export default PageA;

4. PageB页面接收参数

在 PageB 组件中，使用 useParams 钩子函数接收参数：

import { useParams } from'react-router-dom';

function PageB() {
  const { id } = useParams();
  return (
    <div>
      <p>Received id: {id}</p>
    </div>
  );
}

export default PageB;

useParams 会返回一个包含所有参数的对象，这里解构出 id 参数并使用。