我正在开发一个Web应用程序，你搜索一本书，这本书的一些信息，如流派，可用性，描述和作者将显示在另一个屏幕上。
到目前为止一切正常，当我搜索一本书时，它的所有信息都显示在控制台中，但我不能在另一个页面中显示这些信息。我使用Solid Router并尝试了许多不同的方法来做到这一点，但它就是不起作用（我也尝试使用 prop 来做到这一点，但它没有再次工作）。
下面是您搜索图书的组件（仅显示在控制台中）
SearchBooks.jsx

import axios from "axios";
import { createSignal } from "solid-js";
import Books from './Books'
function SearchBooks() {
  const [searchText, setSearchText] = createSignal("");
  const [book, setBook] = createSignal([]);
  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.get(
        `https://www.googleapis.com/books/v1/volumes?q=${searchText()}`
      );
      if (response) {
        const books = response.data.items;
        console.log(books);
        setBook(response.data);
      }
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div className="w-full mt-10 bg-gray-100 flex justify-center items-center">
      <div className="container mx-auto dark:bg-gray-900 rounded-lg p-14">
        <form onSubmit={handleSubmit}>
          <h1 className="text-center font-bold text-white text-4xl">
            Find your perfect books{" "}
          </h1>{" "}
          <br />
          <div className="sm:flex items-center bg-white rounded-lg overflow-hidden px-2 py-1 justify-between">
            <input
              className="text-base text-gray-400 flex-grow outline-none px-2"
              type="text"
              placeholder="Search for books"
              value={searchText()}
              onInput={(e) => setSearchText(e.target.value)}
            />
            <div className="ms:flex items-center px-2 rounded-lg space-x-4 mx-auto ">
              <button className="dark:bg-gray-900 text-white text-base rounded-lg px-4 py-2 font-thin">
                Search
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  );
}

export default SearchBooks;

那么，我如何才能使这些信息显示在另一个页面/组件？