0

我现在正在写搜索结果页面，我想使用动态路由来实现。这是我的搜索条形码，

<Link href={`/productSearchResult/${searchWord}`}>
  <a className={styles.navbar_searchbar_dataResult_productItem}>
    <p>{filteredData}</p>
  </a>
</Link>

searchWord是用户的输入，如果用户点击自动完成的链接，它将跳转到searchResult页面。这是我的搜索结果代码，

import Navbar from "../../components/navbar"
import Head from "next/dist/shared/lib/head"
import searchResult from "../../components/searchResult"
import productList from "../../components/productList"

export default function productionSearchResult({ searchName }) {

  const [searchedProducts, setSearchedProducts] = useState([])
  console.log(searchName);
  const productsInformation = searchResult(searchName);
  productsInformation.then(function(result) {
    setSearchedProducts(result.props)
  })
  
  return (
    <div>
      <Head>
        <title>Growcery | Search Result</title>
        <meta name="description" content="Your search result | Growcery" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Navbar/>
      <main>
        <p>Showing results for {searchName}</p>
        <productList products={searchedProducts} />
      </main>
    </div>
  )
}

export async function getServerSideProps({ product_name }) {
  const productName = product_name;
  const res = await fetch(`${process.env.NEXT_PUBLIC_API_LINK}search-products/${productName}/`);
  let data = "";
  if (res)
    data = await res.json();

  return {
    props: {
      products: data.data || "",
    }
  }
}

我写了一个console.log(searchName)看看代码是否可以获取searchName，这是我的谷歌浏览器的截图。 谷歌浏览器中的路由路径 console.log(searchName)

但我只能undefined在我的 chrome 终端中看到。

4

1 回答 1

0
  1. 有一种简单的方法可以捕获查询参数并在组件中的任何位置使用它。
  2. 它还取决于您的路线，因为您的路线必须是这样的。
       <Route exact path="/productSearchResult/:name?"></Route>
    ------------------------------------------------------------------------
      import Navbar from "../../components/navbar"
    import Head from "next/dist/shared/lib/head"
    import searchResult from "../../components/searchResult"
    import productList from "../../components/productList"
    
    export default function productionSearchResult({props}) {
    
      const [searchedProducts, setSearchedProducts] = useState([])
       let searchName = props.match.params.name;
      console.log(searchName);
      const productsInformation = searchResult(searchName);
      productsInformation.then(function(result) {
        setSearchedProducts(result.props)
      })
      
      return (
        <div>
          <Head>
            <title>Growcery | Search Result</title>
            <meta name="description" content="Your search result | Growcery" />
            <link rel="icon" href="/favicon.ico" />
          </Head>
          <Navbar/>
          <main>
            <p>Showing results for {searchName}</p>
            <productList products={searchedProducts} />
          </main>
        </div>
      )
    }
    
    export async function getServerSideProps({ product_name }) {
      const productName = product_name;
      const res = await fetch(`${process.env.NEXT_PUBLIC_API_LINK}search-products/${productName}/`);
      let data = "";
      if (res)
        data = await res.json();
    
      return {
        props: {
          products: data.data || "",
        }
      }
    }
于 2021-09-22T18:38:20.520 回答