React搜索栏历史记录推送到另一个页面，但带有组件

import React, { useState } from 'react';

const SearchBar = () => {
  const [searchHistory, setSearchHistory] = useState([]);

  const handleSearch = (query) => {
    // 处理搜索逻辑
    // ...

    // 更新搜索历史记录
    setSearchHistory([...searchHistory, query]);
  };

  return (
    <div>
      <input type="text" />
      <button onClick={() => handleSearch(query)}>搜索</button>
    </div>
  );
};

export default SearchBar;

import React from 'react';

const SearchResults = ({ searchHistory }) => {
  return (
    <div>
      <h2>搜索历史记录</h2>
      <ul>
        {searchHistory.map((query, index) => (
          <li key={index}>{query}</li>
        ))}
      </ul>
    </div>
  );
};

export default SearchResults;

import React from 'react';
import SearchBar from './SearchBar';
import SearchResults from './SearchResults';

const App = () => {
  // 使用状态管理库或React的上下文来管理搜索历史记录
  const searchHistory = ['搜索记录1', '搜索记录2', '搜索记录3'];

  return (
    <div>
      <SearchBar />
      <SearchResults searchHistory={searchHistory} />
    </div>
  );
};

export default App;