Question

我对javascript还是有点初学者，但是我正在使用下一个路由，该路由在幕后使用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

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中不需要任何魔术或图案即可创建路线。

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

1 个答案: