I meet a problem to access dynamic routes through a product name from my API when the name has spaces. I have no problem accessing routes when the product name is just one word.
utils/api.js
export async function getProduct(name) {
const products = await fetchAPI(`/books?name=${name}`);
return products?.[0];
}
pages/books/[name].js
// This function gets called at build time
export async function getStaticPaths() {
// Call an external API endpoint to get products
const products = await getProducts();
// Get the paths we want to pre-render based on posts
const paths = products.map((product) => `/books/${product.name}`)
// We'll pre-render only these paths at build time.
// { fallback: false } means other routes should 404.
return { paths, fallback: false }
}
/components/Catalogue.js
<Link href='/books/[name]' as={`/books/${_product.name}`}>
question from:
https://stackoverflow.com/questions/65901119/nextjs-dynamic-routing-problem-with-spaces 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…