面试题：React嵌套路由中的参数传递与动态路由处理

Question

在React的嵌套路由场景下，假设父路由'/user/:userId'，子路由'/user/:userId/profile'和'/user/:userId/orders'。要求在子路由组件中获取到':userId'参数，并能在子路由发生变化时（如从'/user/1/profile'切换到'/user/1/orders'）进行相应的数据更新操作。请给出实现思路并写出关键代码。

Answer 1

实现思路

1. 使用 react-router-dom 提供的 useParams 钩子函数获取路由参数 :userId。
2. 利用 useEffect 钩子函数监听路由变化，当子路由发生变化时，触发数据更新操作。

关键代码

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

const UserProfile = () => {
    const { userId } = useParams();

    useEffect(() => {
        // 在这里进行数据更新操作，比如发起 API 请求获取新数据
        console.log(`子路由变化，userId: ${userId}`);
        // 示例：假设这里有一个获取用户数据的函数 getProfileData
        // getProfileData(userId);
    }, [userId]);

    return (
        <div>
            <h1>用户 {userId} 的个人资料页面</h1>
        </div>
    );
};

const UserOrders = () => {
    const { userId } = useParams();

    useEffect(() => {
        // 在这里进行数据更新操作，比如发起 API 请求获取新数据
        console.log(`子路由变化，userId: ${userId}`);
        // 示例：假设这里有一个获取用户订单数据的函数 getOrderData
        // getOrderData(userId);
    }, [userId]);

    return (
        <div>
            <h1>用户 {userId} 的订单页面</h1>
        </div>
    );
};