React -如何创建动态(使用路由器)详细信息页面

npx create-react-app my-app
cd my-app
npm install react-router-dom

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

const Details = () => {
  const { id } = useParams();

  return (
    <div>
      <h2>详细信息页面</h2>
      <p>动态参数：{id}</p>
    </div>
  );
};

export default Details;

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Details from './pages/Details';

const App = () => {
  return (
    <Router>
      <div>
        <h1>我的应用</h1>
        <Route path="/details/:id" component={Details} />
      </div>
    </Router>
  );
};

export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

npm start