用react路由写商品详情页是如何写的

首先，在React中使用路由需要先安装react-router-dom依赖包，可以使用npm或yarn进行安装。

然后，在需要使用路由的组件中，引入BrowserRouter和Route组件，例如：

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

function App() {
  return (
    <BrowserRouter>
      <Route exact path="/" component={Home} />
      <Route path="/product/:id" component={ProductDetail} />
    </BrowserRouter>
  );
}

上面的代码中，BrowserRouter是一个提供路由功能的顶层组件，Route则是用来匹配路由路径和组件的关系。其中，exact表示精确匹配，避免误匹配，path表示路由路径，component表示对应的组件。

在ProductDetail组件中，可以通过props获取到路由参数，例如：

function ProductDetail(props) {
  const { id } = props.match.params;
  // 根据id获取商品详情
  return (
    <div>
      <h1>Product Detail Page</h1>
      <p>product id: {id}</p>
    </div>
  );
}

上面的代码中，通过props.match.params获取到路由参数，然后根据参数获取对应的商品详情。

最后，可以通过Link组件在其他页面中跳转到商品详情页，例如：

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

function ProductList() {
  return (
    <ul>
      <li><Link to="/product/1">Product 1</Link></li>
      <li><Link to="/product/2">Product 2</Link></li>
      <li><Link to="/product/3">Product 3</Link></li>
    </ul>
  );
}

上面的代码中，通过Link组件设置跳转路径，点击后会跳转到对应的商品详情页。