Estoy escribiendo la página de resultados de búsqueda ahora y quiero usar una ruta dinámica para implementar. Este es mi código de barras de búsqueda,
<Link href={`/productSearchResult/${searchWord}`}> <a className={styles.navbar_searchbar_dataResult_productItem}> <p>{filteredData}</p> </a> </Link> searchWord es la entrada del usuario, y si el usuario hace clic en el enlace autocompletado, saltará a la página searchResult . Este es mi código de resultado de búsqueda,
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 || "", } } } Escribí un console.log(searchName) para ver si el código puede obtener el nombre de searchName , aquí está la captura de pantalla de mi Google Chrome. ruta ruta console.log (searchName) en google chrome
Pero solo puedo ver undefined en mi terminal de cromo.
<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 || "", } } }