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

【问题标题】：Match and Param object in Next.js router for Server side renderingNext.js 路由器中的 Match 和 Param 对象用于服务器端渲染
【发布时间】：2019-09-07 13:09:36
【问题描述】：

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

以下是当前代码

App.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 文档。

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

【问题讨论】：

标签： javascript reactjs react-router next.js high-order-component

【解决方案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)

【讨论】：