11、React Router与表单使用全解析

React Router与表单使用全解析

1. React Router的使用

在React应用中，路由是构建单页面应用（SPA）的关键部分。React Router提供了强大的路由功能，帮助我们实现页面的导航和切换。

1.1 获取动态参数

在React Router中，我们可以通过 useParams 钩子来获取URL中的动态参数。例如，下面的代码展示了如何使用 useParams 来显示特定演讲者的详细信息：

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

const SpeakerDetail = () => {
    const { speakerId } = useParams();
    return (
        <div className='page-wrapper'>
            <h1>This is SpeakerDetail with the ID: {speakerId} </h1>
        </div>
    );
};

export default SpeakerDetail;

在上述代码中， useParams 钩子返回一个包含路由中动态参数的对象，我们可以从中提取出 speakerId 并显示在页面上。