用于服务器端渲染的 Next.js 路由器中的匹配和参数对象

Question

I am trying to convert my client side application to server side rendered because of problem in SEO. For client side I have used react router which is passing the prop to other child components while render.

Below is current code

App.js

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

Const

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}`;

Homescreen component ( Getting the value here in the child components)

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

Screenshot of console

I am not sure how to achieve this with Next/router, already tried following next.js documentation.

Any help of sample would be really appreciated.

Answer 1

if your component is functional component then use "useRouter" hook.

  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

if your function is class component, you use withRouter()

import { withRouter } from 'next/router'

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

export default withRouter(Page)