react 动态路由

React Router 动态路由是一种功能，它允许你在URL中包含变量，这些变量可以在组件中通过 props动态获取和渲染内容。在React Router中，动态路由通常是通过`{route}`、`{params}`或者`{match}`对象来实现的。

例如，假设你有一个博客应用，每个博客文章都有一个唯一的ID。你可以设置一个动态路径 `/posts/:postId`，其中`:postId`是一个动态占位符，代表URL参数。当用户访问`/posts/123`这样的链接时，React Router会将`postId`值传给对应的组件，如`PostDetail`组件。

在实际配置中，可以使用`<Route>`组件，并结合`useParams` hook来获取动态参数：

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

function PostDetail() {
  const { postId } = useParams();
  
  // 使用postId在服务器上获取文章数据并渲染
  useEffect(() => {
    fetch(`/api/posts/${postId}`).then(data => ...);
  }, [postId]);
  
  return <div>Article details for post ID: {postId}</div>;
}