如何在Reactjs中通过动态路由传递额外的参数

Question

我在Reactjs工作，使用nextjs，我的[slug.js]工作正常，以下url

<Link href={`/${post.slug}`}><a>

但是我想发送/传递"hidden"(附加参数)与此，每当我尝试这样做，我得到404错误，我想这是因为在某些页面我想使用不同的api在"serversideprops"，现在这里是我的代码

export const getServerSideProps = async ({ params }) => {
console.log(params); // right now i am getting "slug" as parameter
if(params.anotherparamter)
{
//futher code
}
elseif(params.slug){    
const { data: data2 } = await Axios.get(`https://xxxxxxxxxxxxxxxxxxxxxxxxx/${params.slug}`);
}
const blogs = data2;
return {
props: {
blogs: blogs
},
};
};

Answer 1

可以使用asprop隐藏查询字符串

你的链接看起来像这样

<Link href={`/${post.slug}?myparam="mysecret"`} as={`/${post.slug}`}></Link> //The link will not show the query param when redirected 

您将能够访问myparam查询在您的serverSideProps中，像这样。

export const getServerSideProps = async ({ params, query }) => {
...
const { myparam } = query
console.log(myparam) // will return mysecret as a string

你可以从文档

阅读更多