为什么我的搜索结果页面可以获取输入词？答案

【问题标题】：Why my search result page can fetch the input words?为什么我的搜索结果页面可以获取输入词？
【发布时间】：2021-11-16 01:53:43
【问题描述】：

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

<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，这是我的谷歌浏览器的截图。 route path console.log(searchName) in google chrome

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

【问题讨论】：

你的productionSearchResult 组件需要一个searchName 属性，但getServerSideProps 函数只返回products。 searchName 是从哪里来的？此外，您应该将组件中的所有异步操作移到 useEffect 中。

标签： javascript html reactjs next.js dynamic-routing

【解决方案1】：

有一种简单的方法可以捕获查询参数并在任何地方使用它组件。
这也取决于您的路由，您的路由必须像。

       <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 || "",
        }
      }
    }

【讨论】：

Next.js 有自己的built-in router，它不使用 React Router。
for next.js stackoverflow.com/questions/59130235/…