NextJs - 不同动作的相同路由名称

Question

我想知道，我们可以为不同的动作使用相同的路由名称吗？例如product/id 用于获取、编辑和删除数据。

在 NextJs 中可以吗？我想实现与 Laravel 相同的路由系统，它可以根据表单方法

为不同的操作使用一个名称

Answer 1

是的，你可以，你可以使用 Next.js

进行嵌套路由

第 1 部分： 文件夹结构（详情here）：

页数/product/delete/[id].js（或.tsx）

行为：当您访问 [your_domain]/product/delete/433 时，您的客户将被重定向到删除的 page，您将在此页面上捕获您的 433 值。如果您需要操作，您可以只创建 API routes 并调用 delete 方法。（例如，点击按钮）

因此，您的任务分为 2 个步骤：

创建 API 路线
创建页面
从路由获取数据到页面。（使用这个lib for client-side rendering, or getServerProps/getStaticProps）

此外，您可以创建一些 "middleware" 以正确连接 DB 到您的项目。

P.S。 laravel 中没有诸如“Controllers”之类的控制器，您通过 API calls.

创建页面和联系 DB 的页面

示例：

/pages/weather/[城市].tsx

import useSWR from 'swr'

const Post = ({cityName, data}) => {
  
  //replace with your API
  //if you like to get data on client-side
  //you can set inverval of refresh, real-time data
  const {data: cityData, error: errorData} = useSWR(`https://api.weatherapi.com/v1/current.json?key=&q=${cityName}&aqi=no`, { refreshInterval: 500 })
  if (!cityData)
  return <div>Loading</div>
  if (cityData){
  return (
        <div>
            <p>Details for city: {cityName}</p>
            <p>Data via client side fetch </p>
            <pre>
                <code>
                {JSON.stringify(cityData, null, 2)}
                </code>
            </pre>
            <p>Data via server-side</p>
            <pre>
                <code>
                {JSON.stringify(data, null, 2)}
                </code>
            </pre>
        </div>
    )
  }
}
export async function getServerSideProps(context) {
    //if you like to fetch data on server side
    //laoded only ONCE page is requested (static)
    const res = await fetch(`https://api.weatherapi.com/v1/current.json?key=&q=${context.params.city}&aqi=no`);
    const data = await res.json();
    return {
        props: {
            cityName: context.params.city,
            data: data
        }
    }
}
export default Post

因此，如果您登录 weatherAPI 并在 API 请求路由中添加您的密钥 (?key=)，它将呈现您的页面，显示您所在城市的天气定义/（示例：/weather/london；/weather/berlin）

NextJs - 不同动作的相同路由名称

NextJs - Same route name for different action

action

routes

next.js