使用 NextJS 自定义路由名称

【问题标题】：Custom route name with NextJS使用 NextJS 自定义路由名称
【发布时间】：2020-03-09 07:09:34
【问题描述】：

几天前我开始在 NextJS 上工作，但我现在确实被阻止了一些我认为非常愚蠢但我在互联网上找不到解决方案的东西......

目前我的网站有 4 个页面（Dashboard、Connexion、Register 和 Notes）位于“pages”文件夹中，与“components”文件夹处于同一级别其中有 Content、Footer、Header、Layout 和 Navigation.js。好吧，我还有一个“公共”文件夹，其中包含一个“构建”文件夹，其中包含 admin.js、app.css、app.js、两个文件 .json 和另外两个 .js。

现在，如果我想进入注册页面，我必须输入 URL /register 但我必须输入 /inscription 才能进入.

希望您了解一切，如果您有任何问题，请问我！谢谢！ :)

【问题讨论】：

标签： javascript reactjs url react-router next.js

【解决方案1】：

在您应该创建的 pages 文件夹内的文件夹顶部， dashboard.js、connection.js、register.js、notes.js。

然后，如果你运行npm run dev，你应该能够进入网址：http://localhost:3000/register

如果您想将您的注册页面显示为 SomeOtherPage，您可以使用下面的代码。

// pageWithLink.js
import Link from "next/link";
export default () => (
  <div>
    <Link href="/register" as="/SomeOtherPage">
      <a>Some Other Page</a>
    </Link>
  </div>
);

【讨论】：

有没有其他可以修改的网址？？例如，如果我输入 "localhost:3000/test" 只需获取我的 register.js 页面？
您可以在 Next.js 的 Link 组件中使用 as 属性，如下所示。 import Link from "next/link"; export default () => ( <div> <Link href="/register" as="/anOtherPage"> <a>An Other Page</a> </Link> </div> );
非常感谢Hasan Sefa Ozalp