Next.js中如何将选中数据通过动态路由跳转至新页面？

问题根源分析 #

当前实现存在几个核心问题：

• 下拉选择框仅渲染选项，无选择后跳转至动态路由的触发逻辑
• 动态路由页面results/[id].tsx使用了旧版next/router的API（App Router下已废弃），且未正确导入组件、获取目标数据
• 未处理路由跳转的交互逻辑

分步修复代码 #

1. 改造 data.tsx：添加选择跳转逻辑

在客户端组件中添加状态跟踪选中项，并使用App Router的useRouter实现跳转：

'use client'
import { WithId } from "mongodb";
import { Neighborhood } from "@/types/db/Neighborhood";
import React, { useState } from "react";
import { useRouter } from "next/navigation"; // 导入App Router的Router

interface FormProps {
    data: WithId<Neighborhood>[];
}

const Data: React.FC<FormProps> = ({ data }) => {
    const router = useRouter();
    const [selectedId, setSelectedId] = useState('');

    // 选择选项后跳转至动态路由
    const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
        const id = e.target.value;
        setSelectedId(id);
        if (id) {
            router.push(`/results/${id}`); // 跳转到对应的详情页
        }
    };

    return (
        <main className="flex flex-row">
            <div className="alcohol-alert flex flex-col items-start p-4">
                <button className="btn btn-alcohol" type="button">
                    <a href="../notification">Alcohol melding maken</a>
                </button>
                <select 
                    className="alcohol-drop p-4"
                    value={selectedId}
                    onChange={handleSelectChange}
                >
                    <option value="">请选择小区</option> {/* 添加默认提示选项 */}
                    {data.map((neighborhood) => (
                        <option key={neighborhood._id.toString()} value={neighborhood._id.toString()}>
                            {neighborhood.Title}
                        </option>
                    ))}
                </select>
            </div>
        </main>
    )
}

export default Data

2. 修复 results/[id].tsx：适配App Router并获取数据

使用App Router的useParams获取动态参数，同时获取对应ID的小区数据：

import { getNeighborhoods } from '@util/mongodb/neighborhood';
import { WithId } from "mongodb";
import { Neighborhood } from "@/types/db/Neighborhood";
import { useParams } from "next/navigation"; // 替代旧版useRouter

// 服务器组件获取对应ID的数据
async function getNeighborhoodById(id: string) {
    const neighborhoods = await getNeighborhoods();
    const data = await neighborhoods.toArray();
    return data.find(item => item._id.toString() === id);
}

export default async function NeighborhoodDetail() {
    const params = useParams();
    const id = params.id as string;
    const neighborhood = await getNeighborhoodById(id);

    if (!neighborhood) {
        return <div>小区不存在</div>;
    }

    return (
        <div className="p-8">
            <h1 className="text-2xl font-bold">{neighborhood.Title}</h1>
            {/* 这里可以渲染小区的详细信息，比如neighborhood的其他字段 */}
            <p className="mt-4">小区ID: {id}</p>
        </div>
    );
}

3. 验证路由结构

确保你的项目路由结构符合App Router规范：

app/
├── page.tsx       # 首页
└── results/
    └── [id].tsx   # 动态路由详情页

关键注意事项 #

• App Router vs Pages Router：Next.js 13+推荐使用App Router，需使用next/navigation中的useRouter和useParams，而非旧版next/router
• 服务器组件与客户端组件：数据获取逻辑应放在服务器组件中，交互逻辑（如跳转）放在客户端组件（标记'use client'）
• 动态参数类型：需将params.id转为字符串类型，避免类型错误

内容的提问来源于stack exchange，提问作者B.Simsek