NextJS中卡片跳转动态路由的正确实现方法咨询

问题背景 #

首次使用Next.js开发项目，现有/trips页面展示行程卡片，点击卡片需跳转到/trips/[tripId]动态页面。当前功能正常，但TripCard组件中硬编码了router.push('/trips/' + trip.id)，导致组件无法复用（换视图使用TripCard时跳转路由需变更），需了解此类场景的最优代码结构。

方案1：通过Props传递跳转逻辑（最高复用性） #

将跳转行为从TripCard组件中抽离，由父组件决定点击后的操作，让TripCard完全与路由解耦，最大化复用性。

修改TripCard组件 #

import { Trip } from './Models'

// 新增onClick属性，跳转逻辑由父组件传入
const TripCard = ({ trip, onClick }: { trip: Trip; onClick: () => void }) => {
    return (
        <div className="card bg-base-100 shadow-xl hover:bg-gray-100 active:bg-gray-300">
            <div className="card-body" onClick={onClick}>
                <h2 className="card-title">{trip.name}</h2>
                <p>This is a trip!</p>
            </div>
        </div>
    )
}

export default TripCard

修改TripsComponent组件 #

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

const TripsComponent = ({ trips }: { trips: Trip[] }) => {
    const router = useRouter()
    return (
        <div>
            <div className="grid grid-cols-4 gap-4">
                {trips.map((trip: Trip) => (
                    <div key={trip.id}>
                        <TripCard 
                            trip={trip} 
                            onClick={() => router.push(`/trips/${trip.id}`)} 
                        />
                    </div>
                ))}
            </div>
        </div>
    )
}

export default TripsComponent

后续在其他视图复用TripCard时，只需传入不同的onClick逻辑即可，比如跳转到/admin/trips/${trip.id}，完全不影响组件本身。

方案2：结合Next.js Link组件（符合官方生态） #

Next.js推荐使用Link组件实现客户端跳转，自带预加载等优化特性，可结合Props传递跳转路径，兼顾复用性与框架优化。

优化TripCard组件 #

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

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

export default TripCard

修改TripsComponent组件 #

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 key={trip.id}>
                        <TripCard 
                            trip={trip} 
                            href={`/trips/${trip.id}`} 
                        />
                    </div>
                ))}
            </div>
        </div>
    )
}

export default TripsComponent

方案3：中心化路由配置（适合大型项目） #

若项目路由较多，可统一管理路由路径，避免硬编码，提升维护效率。

创建路由配置文件routes.ts #

export const routes = {
    tripDetails: (tripId: string) => `/trips/${tripId}`,
    adminTripDetails: (tripId: string) => `/admin/trips/${tripId}`
}

在TripsComponent中使用 #

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

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

后续修改路由路径时，只需更新routes.ts文件即可，无需逐个修改硬编码的路由字符串。

额外优化：动态页面类型安全 #

当前[tripId].tsx中router.query.tripId类型模糊，可通过泛型实现类型安全：

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

interface RouterQuery {
    tripId: string
}

const TripPage: NextPage = () => {
    const router = useRouter<RouterQuery>()
    // tripId类型自动推断为string，无需处理undefined
    const tripId = router.query.tripId
    return (
        <div>
            <h1>This is {tripId}</h1>
        </div>
    )
}

export default TripPage

内容的提问来源于stack exchange，提问作者FlameDra