如何在 Nextjs 中获取另一个页面的 url 值

Question

如何将 url 数据传递到另一个页面，我正在创建简单的组件我想将 href 值发送到另一个页面，因为需要发送动态值（即）我添加了链接值来发送 store/[storeId] 页。我需要从此链接获取数值。请问如何获取这个问题可以解决

MenuApi.js

import React, { Component } from 'react'; 
import { Grid, Image } from "semantic-ui-react";
import Link from 'next/link';
 function MenuApi(props) {
   return (
    
         <Grid className="home-icon">
      
      <Grid.Row centered doubling columns={8} mobile>
        {props.menu.map((x, i) => (
          <Grid.Column centered key={i} Style="width: 9%!important;"> 
            <Link href="category/fitness/25">
              <Image src={x.image} alt=""/>
            </Link> 
            <Link href="category/fitness/25">
              <p >{x.store_name}</p>
            </Link>
          </Grid.Column>
        ))}
      </Grid.Row>
    </Grid>
    
   )
 }

export default MenuApi;

商店/[storeId].js

import {useRouter} from 'next/router';
function Store()
{
    const router=useRouter();
    const route=router.query.storId;
    return(
        <h1>Store{route}</h1>
    )
}
export default Store;

Answer 1

如果我正确理解了你的问题，这应该对你有用

import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { storeId } = router.query

  return <p>Post: {storeId}</p>
}

export default Post

/fitness/1、/fitness/abc 等任何路由都会被 pages/post/[storeId].js 匹配。匹配的路径参数将作为查询参数发送到页面，并与其他查询参数合并。

例如，路由/fitness/abc 将具有以下查询对象：

{ "storeId": "abc" }

同样，路由 /fitness/abc?foo=bar 将具有以下查询对象：

{ "foo": "bar", "storeId": "abc" }