如何在React Router Link组件中添加动态代码

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

<Link to={`/path/${dynamicValue}`}>Link Text</Link>

<Route path="/path/:dynamicValue" component={ComponentName} />

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

const ComponentName = (props) => {
  const dynamicValue = props.match.params.dynamicValue;
  // 其他逻辑处理
  return (
    <div>
      <h1>Component</h1>
      <p>Dynamic Value: {dynamicValue}</p>
    </div>
  );
};

const App = () => {
  const dynamicValue = '123';

  return (
    <div>
      <Link to={`/path/${dynamicValue}`}>Link Text</Link>
      <Route path="/path/:dynamicValue" component={ComponentName} />
    </div>
  );
};

export default App;