react函数式组件跳转详情页面

要实现从 React 函数式组件跳转到详情页面，你可以使用 `react-router-dom` 库来实现路由功能。

首先，在你的应用程序中安装 `react-router-dom`：

npm install react-router-dom

然后，你需要在你的应用程序中定义路由。这可以通过 `BrowserRouter` 组件来实现。在你的主组件中，你需要将所有的路由放在 `BrowserRouter` 组件中。

例如：

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

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

export default App;

在上面的代码中，我们定义了两个路由，一个用于显示主页，一个用于显示详情页。注意，在详情页的路由中，我们使用了 `:id` 来表示详情页的 ID。这个 ID 是动态的，会在实际使用时被替换成具体的值。

在你的主组件中，你可以使用 `Link` 组件来实现路由的跳转。例如：

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

const Home = () => {
  return (
    <div>
      <h1>Home</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;

在上面的代码中，我们使用 `Link` 组件将用户导航到详情页。我们使用 `/detail/:id` 的格式来指定详情页的路由，`:id` 将会被替换成具体的 ID 值。

最后，在详情页组件中，你可以使用 `useParams` 钩子来获取从主页传递过来的 ID 值。例如：

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

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

  return (
    <div>
      <h1>Detail {id}</h1>
    </div>
  );
};

export default Detail;

在上面的代码中，我们使用 `useParams` 钩子来获取从主页传递过来的 ID 值。然后，我们将这个值用于渲染详情页的标题。

这就是如何在 React 函数式组件中实现路由跳转到详情页面的方法。