如何在列表中生成动态url？

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

const BlogList = ({ blogs }) => {
  return (
    <ul>
      {blogs.map(blog => (
        <li key={blog.id}>
          <Link to={`/blog/${blog.id}`}>{blog.title}</Link>
        </li>
      ))}
    </ul>
  );
};

const Blog = ({ match }) => {
  // 根据match.params中的动态参数加载对应的博客文章
  const blogId = match.params.id;
  // 加载博客文章的逻辑...

  return (
    <div>
      {/* 博客文章内容 */}
    </div>
  );
};

const App = () => {
  const blogs = [
    { id: 1, title: 'Blog 1' },
    { id: 2, title: 'Blog 2' },
    { id: 3, title: 'Blog 3' }
  ];

  return (
    <Router>
      <div>
        <h1>Blog List</h1>
        <Route exact path="/" render={() => <BlogList blogs={blogs} />} />
        <Route path="/blog/:id" component={Blog} />
      </div>
    </Router>
  );
};

export default App;