面试题：React中如何在路由间传递参数

Question

在React路由（如使用React Router）构建单页应用时，阐述至少两种在不同路由组件间传递参数的方式，并给出简单代码示例。

Answer 1

1. 通过URL参数传递：
   • 原理：在URL中嵌入参数，路由组件可以从URL中解析这些参数。
   • 示例：
     • 定义路由：

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

function App() {
    return (
        <Router>
            <Routes>
                <Route path="/product/:productId" element={<DetailPage />} />
            </Routes>
        </Router>
    );
}

export default App;

 - 在DetailPage组件中获取参数：

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

function DetailPage() {
    const { productId } = useParams();
    return (
        <div>
            <p>产品ID: {productId}</p>
        </div>
    );
}

export default DetailPage;

2. 通过state传递：
   • 原理：在导航时，可以将参数作为state对象的一部分传递，目标组件可以从history.location.state中获取这些参数。
   • 示例：
     • 导航传递参数：

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

function ProductList() {
    const product = { id: 1, name: '示例产品' };
    return (
        <div>
            <Link to={{
                pathname: '/product-detail',
                state: { product }
            }}>查看产品详情</Link>
        </div>
    );
}

export default ProductList;

 - 在目标组件获取参数：

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

function ProductDetail() {
    const location = useLocation();
    const { product } = location.state || {};
    return (
        <div>
            {product && <p>产品名称: {product.name}</p>}
        </div>
    );
}

export default ProductDetail;