用於服務器端渲染的 Next.js 路由器中的匹配和參數對象

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)