如何将查询参数发送到始终显示在_app中的Header组件?Nextjs

Question

我在_app中有这段代码。

<Header />
<Component {...pageProps} />

我想发送当前所选选项卡的Header组件查询参数。因此，如果有人导航到"http://domain.com/hello"，我会在Header中获得hello作为查询参数。

我知道你可以在创建具有react路由器dom的react应用程序中实现这一点，如下所示：

<Route path="/:currentTab?" component={Header} />

我如何在Nextjs中实现这一点？

Answer 1

您可能可以在Header组件中使用useRouter类似的东西

从"导入{useRouter}；下一个/路由器"；；

const Header = () => {
const router = useRouter();
return <h1> HI ! {router.pathname} </h1>;
};
export default Header;

当然，您的路径名将包括/，例如站点/hellourl将显示

Hi /hello

但是，当你推进你的需求时，你可以开始计算这些细节

你可以在这里看到我的样品小提琴：https://codesandbox.io/s/2-route-inspection-in-custom-app-forked-828gu?file=/components/SiteLayout.js

另一个这在某种程度上取决于您如何构建路由页面(我之所以没有添加示例，因为这对您的结构来说是主观的(，例如添加

[greet].js，并以类似的方式访问它我们在react路由器dom

const { greet } = router.query;
return <h1> HI ! {greet} </h1>;

但因为我们不知道你的应用程序的结构，而且域是顶级的。这取决于你这个案例是否可行

请在此处查看小提琴：https://codesandbox.io/s/2-route-inspection-in-custom-app-forked-tnybv?file=/components/Header.js:95-162