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

Question

我對javascript有點初學者，但是我正在使用下一條路線，該路線在幕后使用path-to-regexp。

我有一個頁面，其中包含鏈接列表。 該頁面的路由是/locations/s-:specialty-providers其中“ specialty”是唯一的動態部分。

當我單擊頁面上的鏈接之一時，當我應將其重新路由到/locations/s-:specialty-providers/:abbr時，它會將我重新路由到/locations/ss-:specialty-providers/:abbr （其中special和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

Next.js將文件放在pages目錄中，可讓您開箱即用

假設您有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中，您不需要任何魔術或圖案即可創建路由。