NextJS:处理动态路由页面的正确方法是什么？

Question

我第一次在NextJS中做一个项目，我想知道处理动态路由的正确方法是什么。

我有一个http://localhost:3000/trips路径，它显示一个包含卡片列表的页面，每个卡片代表一个“旅行”：

​

​

当我点击这些卡片之一时，我想导航到该路由的动态页面，比如http://localhost:3000/trips/0b68a50a-8377-4720-94b4-fabdabc12da1。

这是我的文件夹结构：

​

​

如您所见，我已经设置了动态路径，并且正在工作。

TripCard是卡组件。TripComponent是一个TripCards网格。trips/index.tsx包含TripsComponent (和其他UI)。

目前我正在TripCard中处理动态路由，如下所示：

import { Trip } from './Models'
import { useRouter } from 'next/router'

const TripCard = ({ trip }: { trip: Trip }) => {
    const router = useRouter()
    return (
        <div className="card bg-base-100 shadow-xl hover:bg-gray-100 active:bg-gray-300">
            <div className="card-body" onClick={() => router.push('/trips/' + trip.id)}>
                <h2 className="card-title">{trip.name}</h2>
                <p>This is a trip!</p>
            </div>
        </div>
    )
}

export default TripCard

动态页面tripId.tsx如下所示：

import { NextPage } from 'next'
import { useRouter } from 'next/router'

const TripPage: NextPage = () => {
    const router = useRouter()
    const tripId = router.query.tripId
    return (
        <div>
            <h1>This is {tripId}</h1>
        </div>
    )
}

export default TripPage

和TripsComponent.tsx：

import { Trip } from './Models'
import TripCard from './TripCard'

const TripsComponent = ({ trips }: { trips: Trip[] }) => {
    return (
        <div>
            <div className="grid grid-cols-4 gap-4">
                {trips.map((trip: Trip) => (
                    <div>
                        <TripCard trip={trip}></TripCard>
                    </div>
                ))}
            </div>
        </div>
    )
}

export default TripsComponent

和trips/index.tsx：

import axios from 'axios'
import { GetStaticProps, InferGetStaticPropsType, NextPage } from 'next'
import { Trip } from '../../components/Models'
import TripsComponent from '../../components/TripsComponent'

const TripsPage: NextPage = (props: InferGetStaticPropsType<typeof getStaticProps>) => {
    return (
        <div className="m-9">
            <h1 className="mt-9 text-3xl font-bold text-slate-800">Your Trips</h1>
            <div className="justify-end">
                <button className="btn btn-primary">Add Trip</button>
            </div>
            <div className="divider"></div>
            <TripsComponent trips={props.data} />
        </div>
    )
}

export const getStaticProps: GetStaticProps = async () => {
    // fetches data and passes to props
}

export default TripsPage

我想我的问题是，在我有卡片的情况下，怎样才是正确的路由方式，而每一张卡片都会转到一个带有关联页面的动态URL中？在TripCard中，我有一个硬编码router.push：

<div className="card-body" onClick={() => router.push('/trips/' + trip.id)}>

但这似乎不是解决问题的正确方法。例如，如果我想在另一个视图中使用TripCard并转到另一条路径，该怎么办？

在NextJS中构造执行此功能的代码的最佳方法是什么？

Answer 1

也许您希望将url作为道具传递并使用NextJs 。

import { Trip } from './Models'
import { useRouter } from 'next/router'
import Link from 'next/link'

const TripCard = ({ trip, url }: { trip: Trip, url: string }) => {
    const router = useRouter()
    return (
        <div className="card bg-base-100 shadow-xl hover:bg-gray-100 active:bg-gray-300">
       <Link href={url} passHref>
            <div className="card-body">
                <h2 className="card-title">{trip.name}</h2>
                <p>This is a trip!</p>
            </div>
        </Link>
        </div>
    )
}

export default TripCard

然后像这样使用组件：

<TripCard trip={trip} href={'/trips/' + trip.id}></TripCard>

希望能帮上忙。

Answer 2

对于动态路由，您必须使用getStaticPaths和getStaticProps来获取之前的路径并生成所有路径。当您从页面导出getStaticPaths.的getStaticPaths时，Nextjs将预呈现getStaticPaths指定的所有路径。

getStaicPaths必须返回两条路径和退路。paths属性必须是一个params数组。而回退意味着Nextjs应该查找页面和预呈现(如果不是预先呈现的话)。假设在发布站点之后，您创建了一张新卡。因此，如果回退为真，NextJs将在数据库中查找卡片并进行预渲染，然后将其存储在文件系统中。如果回退是假的，它将显示404未找到。

另外，不要使用router.push，而是使用Link。

https://nextjs.org/docs/api-reference/data-fetching/get-static-paths

Answer 3

您实现的路由仅正确。也许你可以试试像这样

对于旅行，您可以导航到/trips，也可以为每次旅行导航/trip/<trip id>

如果希望使TripCard动态，那么可以将URL本身传递给TripCard组件。

url将是<route name>/<trip id>

<TripCard trip={trip} url={url}></TripCard>