面试题：React路由中如何处理嵌套路由及动态参数传递

Question

假设有一个React应用，存在一个父路由'/products'，在其下有多个子路由，每个子路由代表不同产品的详情页，产品详情页路径格式为'/products/:productId'，请阐述如何配置这种嵌套路由结构，并在子组件中获取':productId'参数，同时展示如何在父组件与子组件间传递其他数据。

Answer 1

1. 配置嵌套路由结构（以React Router为例）：
   • 首先确保安装了react - router - dom。
   • 在父组件中配置路由如下：

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

const ParentComponent = () => {
    return (
        <Router>
            <Routes>
                <Route path="/products" element={<ParentContent />}>
                    <Route path=":productId" element={<ProductDetail />} />
                </Route>
            </Routes>
        </Router>
    );
};

const ParentContent = () => {
    return (
        <div>
            <h1>Products Page</h1>
        </div>
    );
};

const ProductDetail = () => {
    return (
        <div>
            <h1>Product Detail Page</h1>
        </div>
    );
};

export default ParentComponent;

2. 在子组件中获取:productId参数：
   • 使用react - router - dom中的useParams钩子。
   • 子组件修改如下：

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

const ProductDetail = () => {
    const { productId } = useParams();
    return (
        <div>
            <h1>Product Detail Page for productId: {productId}</h1>
        </div>
    );
};

export default ProductDetail;

3. 在父组件与子组件间传递其他数据：
   • 通过props传递：
     • 在父组件路由配置中，将数据作为props传递给子组件。

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

const ParentComponent = () => {
    const sharedData = "Some data to pass";
    return (
        <Router>
            <Routes>
                <Route path="/products" element={<ParentContent />}>
                    <Route path=":productId" element={<ProductDetail data={sharedData} />} />
                </Route>
            </Routes>
        </Router>
    );
};

const ParentContent = () => {
    return (
        <div>
            <h1>Products Page</h1>
        </div>
    );
};

const ProductDetail = ({ data }) => {
    const { productId } = useParams();
    return (
        <div>
            <h1>Product Detail Page for productId: {productId}</h1>
            <p>{data}</p>
        </div>
    );
};

export default ParentComponent;

• 使用上下文（Context）：
  • 创建上下文对象。

import React from'react';

const MyContext = React.createContext();

export default MyContext;

 - 在父组件中提供上下文数据。

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

const ParentComponent = () => {
    const sharedData = "Some data to pass";
    return (
        <Router>
            <MyContext.Provider value={sharedData}>
                <Routes>
                    <Route path="/products" element={<ParentContent />}>
                        <Route path=":productId" element={<ProductDetail />} />
                    </Route>
                </Routes>
            </MyContext.Provider>
        </Router>
    );
};

const ParentContent = () => {
    return (
        <div>
            <h1>Products Page</h1>
        </div>
    );
};

const ProductDetail = () => {
    const data = React.useContext(MyContext);
    const { productId } = useParams();
    return (
        <div>
            <h1>Product Detail Page for productId: {productId}</h1>
            <p>{data}</p>
        </div>
    );
};

export default ParentComponent;