react点击跳转详情页

在React中，可以使用React Router来实现点击跳转到详情页。下面是一个简单的示例：

1. 首先，在项目中安装React Router：

npm install react-router-dom

2. 在App.js中引入React Router和两个组件（Home和Detail）：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import Detail from './Detail';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <<Route path="/detail/:id" component={Detail} />
      </Switch>
    </Router>
  );
}

export default App;

3. 在Home组件中，在需要跳转的元素上使用Link组件：

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

function Home() {
  return (
    <div>
      <h1>Home Page</h1>
      <ul>
        <li><Link to="/detail/1">Item 1</Link></li>
        <li><Link to="/detail/2">Item 2</Link></li>
        <li><Link to="/detail/3">Item 3</Link></li>
      </ul>
    </div>
  );
}

export default Home;

4. 在Detail组件中，可以通过props.match.params获取路由参数id：

import React from 'react';

function Detail(props) {
  const { id } = props.match.params;
  return (
    <div>
      <h1>Detail Page</h1>
      <p>Item {id} detail...</p>
    </div>
  );
}

export default Detail;

这样，当点击Home组件中的Link时，就会跳转到对应的Detail组件，并且在Detail组件中显示对应的详情信息。