在next.js中执行路由的最佳方法是什么

Question

我是javascript的初学者，但我正在使用next routes，它在幕后使用path-to-regexp。

我有一个页面，其中有一个链接列表。这个页面的路径是/locations/s-:specialty-providers，其中“专业”是唯一的动态部分。

当我点击页面上的一个链接时，它会将我重新路由到/locations/s-s-:specialty-providers/:abbr (专业和缩写都是动态的)，而它应该重新路由到/locations/s-:specialty-providers/:abbr。

路由文件：

{ name: 'sitemap-providers-location-procedure', page: 'sitemap/providers/by_location/by_procedure', pattern: '/locations/:procedure-providers' }, { name: 'sitemap-specialties-location-city', page: 'sitemap/specialties/by_location/by_city', pattern: '/locations/s-:specialty-providers/:abbr' },

Answer 1

通过将文件放入pages目录，Next.js将为您提供开箱即用的路由

假设你有pages/index.js

    import Link from 'next/link'

function getSitemaps () {
  return [
    {
      id:"1",
      title: "sitemap-providers-location-procedure",
      s: "providers",
      abbr: "by_procedure",
    },
    {
      id:"2",
      title: "sitemap-specialties-location-city",
      s: "specialties",
      abbr: "by_city",
    }
  ]
}

const SitemapLink = ({post}) => (
  <li>
    <Link as={`/sitemap/${post.s}/by_location/${post.abbr}`} href={`/sitemap?title=${post.title}`}>
      <a>{post.title}</a>
    </Link>
  </li>
)

export default () => (
<div>
  <h1>Links</h1>
  <ul>
    {getSitemaps().map((sitemap) => (
      <SitemapLink key={sitemap.id} post={sitemap}/>
    ))}
  </ul>
</div>
)

还有另一个文件pages/sitemap.js

    import {withRouter} from 'next/router'

const Page = withRouter((props) => (
  <div>
    <h1>{props.router.query.title}</h1>
    <p>This is the page content.</p>
  </div>
))

export default Page

现在，您有了动态路由。

您不需要在next.js中使用任何魔法或模式来创建路由。