javascript - Next.js 路由器中的 Match 和 Param 对象用于服务器端渲染

Question

由于 SEO 中的问题，我正在尝试将我的客户端应用程序转换为呈现的服务器端。对于客户端，我使用了反应路由器，它在渲染时将道具传递给其他子组件。

以下是当前代码

应用程序.js

render() {
return (
<Switch>
<Route path={constant.pathId + constant.pathGender} render={(props) => <HomeScreen {...props} />} />
</Switch>
);
}

常量

export const industryRegexGender = "(men||women)";
export const industryRegex = "(en-kw||en-qa||en-ae||en-bh||en-om||en-sa||ar-kw||ar-qa||ar-ae||ar-bh||ar-om||ar-sa)";
export const pathId = `/:id${industryRegex}`;
export const pathGender = `/:gender${industryRegexGender}`;

主屏幕组件（在子组件中获取此处的值）

let paramId = this.props.match.params.id

控制台截图

我不确定如何使用 Next/router 来实现这一点，已经尝试过遵循 next.js 文档。

样品的任何帮助将不胜感激。

Answer 1

如果您的组件是功能组件，则使用“useRouter”挂钩。

  import { useRouter } from 'next/router'

  const Post = () => {
  const router = useRouter()
  //console.log(router) to see router object
  const { pid } = router.query
  return <p>Post: {pid}</p>}

  export default Post

如果您的函数是类组件，则使用 withRouter()

import { withRouter } from 'next/router'

function Page({ router }) {
  return <p>{router.pathname}</p>
}

export default withRouter(Page)