react 页面跳转怎么写呀

import React from 'react';
import { AutoComplete, Input } from 'antd';
import axios from 'axios';
// import { useHistory } from 'react-router-dom';
// import { useHistory } from 'react-router-dom'
import { useNavigate } from 'react-router-dom';
// import { withRouter } from 'react-router-dom';

interface AutoCompleteSearchBoxProps {
  history: any; // 这里的类型可以根据你的实际需求进行调整
}

interface AutoCompleteSearchBoxState {
  searchResults: any[]; // 假设搜索结果是一个对象数组，每个对象包含label属性
}
// AutoCompleteSearchBox.tsx
class AutoCompleteSearchBox extends React.Component {
  // const history = useHistory();

  // ···
  //     const history = useHistory()
  //     history.push('/xxx')

  constructor(props: AutoCompleteSearchBoxProps) {
    super(props);
    // this.state = {
    //   searchResults: []
    // };
  }


  state = {
    searchResults: [],
    inputRef:{}
  };

  handleSearch = (value:any) => {
    if (value) {
      // 发送远程搜索请求
      axios.get(`https://api.example.com/search?q=${value}`)
        .then((response) => {
          const searchResults = response.data.results;
          this.setState({ searchResults });
        })
        .catch((error) => {
          console.error('Error fetching search results:', error);
          let response={
            data:{
              results:[
                {  
                  label: "dadad"
                },
                {
                  label: "ada"
                }
               ]
            }
          }
          const searchResults = response.data.results;
          this.setState({ searchResults });
        });
    } else {
      this.setState({ searchResults: [] });
    }
  };

  handleSelect = (value:any) => {
    // 将选择的关键词填充到输入框中
    // this.inputRef.input.input.value = value;
    // this.state.inputRef.input.input.value = value;
    this.state.inputRef.input.value = value;
    const navigate = useNavigate();
    const path = `/details/${value}`;
    navigate(path);
    console.log("this.props");
    console.log(this.props);

    // this.props.history.push(path);
    // antd ts react 界面跳转

  };

  render() {
    const { searchResults } = this.state;

    return (
      <div>
        <AutoComplete
          style={{ width: 200 }}
          options={searchResults.map((result) => ({
            value: result.label,
            label: result.label,
          }))}
          onSearch={this.handleSearch}
          onSelect={this.handleSelect}
        >
          <Input
          //  this.inputRef = ref; 
            ref={(ref) => { this.state.inputRef = ref; }}
            placeholder="请输入关键字"
          />
        </AutoComplete>
      </div>
    );
  }
}

export default AutoCompleteSearchBox;

报错


pment.js:16227  Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at Object.throwInvalidHookError (react-dom.development.js:16227:9)
    at Object.useContext (react.development.js:1618:21)
    at useNavigate (hooks.tsx:177:31)
    at handleSelect (AutoCompleteSearchBox.tsx:72:22)
    at triggerSelect2 (Select.js:356:7)
    at Object.current (Select.js:380:5)
    at useRefFunc.js:11:28
    at onSelectValue2 (OptionList.js:150:7)
    at onClick (OptionList.js:329:11)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
throwInvalidHookError @ react-dom.development.js:16227
useContext @ react.development.js:1618
useNavigate @ hooks.tsx:177
handleSelect @ AutoCompleteSearchBox.tsx:72
triggerSelect2 @ Select.js:356
(匿名) @ Select.js:380
(匿名) @ useRefFunc.js:11
onSelectValue2 @ OptionList.js:150
onClick @ OptionList.js:329
callCallback2 @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
executeDispatch @ react-dom.development.js:9041
processDispatchQueueItemsInOrder @ react-dom.development.js:9073
processDispatchQueue @ react-dom.development.js:9086
dispatchEventsForPlugins @ react-dom.development.js:9097
(匿名) @ react-dom.development.js:9288
batchedUpdates$1 @ react-dom.development.js:26140
batchedUpdates @ react-dom.development.js:3991
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430
Test:1  Unchecked runtime.lastError: The message port closed before a response was received.

   "react-router-dom": "^6.3.0",

这个版本只能函数
react-router-dom使用指南（最新V6.0.1） - 知乎
https://zhuanlan.zhihu.com/p/431389907

import React, { useState, useRef } from 'react';
import { AutoComplete, Input } from 'antd';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';

interface AutoCompleteSearchBoxProps {
  history: any; // 这里的类型可以根据你的实际需求进行调整
}

interface SearchResult {
  label: string;
}

const AutoCompleteSearchBox: React.FC<AutoCompleteSearchBoxProps> = (props) => {
  const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
  const inputRef = useRef<Input>(null);
  const navigate = useNavigate();

  const handleSearch = (value: string) => {
    if (value) {
      // 发送远程搜索请求
      axios
        .get(`https://api.example.com/search?q=${value}`)
        .then((response) => {
          const searchResults = response.data.results;
          setSearchResults(searchResults);
        })
        .catch((error) => {
          console.error('Error fetching search results:', error);
          const searchResults: SearchResult[] = [
            {
              label: "dadad"
            },
            {
              label: "ada"
            }
          ];
          setSearchResults(searchResults);
        });
    } else {
      setSearchResults([]);
    }
  };

  const handleSelect = (value: string) => {
    console.log("inputRef.current");
    console.log(inputRef.current);
    inputRef.current?.focus();
    // console.log(    "inputRef.current?.input.setValue");
    // console.log(    inputRef.current?.input.setValue);

    // inputRef.current?.input.setValue(value);

    let  inputItem= inputRef.current?.input
    inputItem.value=value
    const path = `/details/${value}`;
    navigate(path);
    console.log("props");
    console.log(props);

    console.log("props.history");
    console.log(props.history);
  };

  return (
    <div>
      <AutoComplete
        style={{ width: 200 }}
        options={searchResults.map((result) => ({
          value: result.label,
          label: result.label,
        }))}
        onSearch={handleSearch}
        onSelect={handleSelect}
      >
        <Input
          ref={inputRef}
          placeholder="请输入关键字"
        />
      </AutoComplete>
    </div>
  );
};

export default AutoCompleteSearchBox;

不知道你这个问题是否已经解决, 如果还没有解决的话:

你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7488757
这篇博客也不错, 你可以看下react中实现页面跳转
除此之外, 这篇博客: react 页面跳转并传值中的 页面内 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
```
   <Button type="primary"  style={{ float:"right",  display : repair["state"] == '2' ? 'inline': 'none'}}  >
        <Link to={{pathname:"/RepairProcessing/RepairRequest",query:{serviceUuid:repair["serviceUuid"]}}} >
           查看详情
      </Link>
          </Button>
```
通过<Link to={{pathname:"路径名",query:{键名:键值}}}文本内容 </Link>
进行传值以及页面跳转，接收页面通过
const RepairRequest:FC<UserPageProps> =({RepairProcessing,dispatch,userListLoading, location: { query: { serviceUuid }}})=>{
```
const RepairRequest:FC<UserPageProps> =({RepairProcessing,dispatch,userListLoading, location: { query: { serviceUuid }}})=>{
```
通过location{query:{键名}}就可取到值。
您还可以看一下搬砖的乔布梭老师的React基础极简入门课程中的 React047：页面跳转小节, 巩固相关知识点
以下回答来自chatgpt:
回答：在使用任何编程语言或框架时，都可能出现报错。可能有以下几种情况：
1. 语法错误：代码中存在语法错误，导致程序无法正确运行。
2. 代码逻辑错误：代码逻辑有误，也可能会导致程序无法正确运行。
3. 环境问题：代码运行的环境有误，例如缺乏必要的依赖库或配置错误等等。
当出现报错时，错误信息通常会被显示在控制台或日志中。具体的报错信息有可能涉及到哪部分代码或者哪个文件出现了问题。
对于 React 开发 Web 应用时的页面跳转问题，可以使用 React Router 来实现。下面是一个简单的例子：
1. 安装 React Router：
```
npm install react-router-dom
```
1. 在 App.js 中引入 BrowserRouter 和 Route 组件：
```
import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <BrowserRouter>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </BrowserRouter>
  );
}

export default App;
```
1. 在 pages 目录下创建 Home.js 和 About.js 文件：
```
// Home.js
import React from 'react';

function Home() {
  return <h1>Home Page</h1>;
}

export default Home;

// About.js
import React from 'react';

function About() {
  return <h1>About Page</h1>;
}

export default About;
```
1. 在导航栏中添加链接到 Home 和 About 页面：
```
import React from 'react';
import { Link } from 'react-router-dom';

function NavBar() {
  return (
    <ul>
      <li><Link to="/">Home</Link></li>
      <li><Link to="/about">About</Link></li>
    </ul>
  );
}

export default NavBar;
```
通过以上步骤，就可以实现简单的页面跳转。当用户点击导航栏中的链接时，React Router 会根据路径匹配对应的组件并渲染到页面上。如果路径没有匹配到任何组件，则会显示默认的 404 页面。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^