又一个搜索按钮，点击后跳转页面，不带参数 react。路由阶段

在 React 中，我们通常使用 React Router 来处理路由。在路由阶段，我们需要定义路由规则，使得用户可以通过点击链接或者按钮来跳转到不同的页面。

首先，我们需要在应用的顶层组件中引入 `BrowserRouter` 或者 `HashRouter`，例如：

import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      {/* 这里是应用的其他组件 */}
    </Router>
  );
}

然后，在 `Router` 标签内部，我们可以使用 `Route` 组件来定义不同的路由规则。例如，如果我们想要定义一个路径为 `/search` 的路由规则，可以这样写：

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

function App() {
  return (
    <Router>
      <Route path="/search">
        {/* 这里是 Search 组件 */}
      </Route>
    </Router>
  );
}

在 `Route` 组件内部，我们可以定义对应的组件。当用户访问 `/search` 路径时，React Router 就会渲染 `Search` 组件。此时，我们可以在 `Search` 组件中添加一个搜索按钮，点击后跳转到其他页面：

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

function Search() {
  const history = useHistory();

  const handleClick = () => {
    history.push('/result');
  };

  return (
    <div>
      <button onClick={handleClick}>搜索</button>
    </div>
  );
}

在 `Search` 组件中，我们首先使用 `useHistory` 钩子来获取路由历史对象。然后，在点击搜索按钮时，我们调用 `history.push` 方法来跳转到路径为 `/result` 的页面。注意，在这个例子中，我们并没有传递任何参数。如果需要传递参数，可以在路径中添加参数，或者使用 `query string`。