How do I link data to a new page in Next.js?

Issue

I am very new to Next.js, and I want to link data that has been selected to a new page using dynamic routes. It didn't work when I read the docs; perhaps I made some mistake that I don't see.

this is my data.tsx

'use client'
import {WithId} from "mongodb";
import {Neighborhood} from "@/types/db/Neighborhood";
import React, {ChangeEvent, FormEvent, useState} from "react";

interface FormProps {
    data: WithId<Neighborhood>[];
}
const Data: React.FC<FormProps> = ({data}) =>{
    return (
        <main className={"flex flex-row"}>
            <div className={"alcohol-alert flex flex-col items-startp-4"}>
                <button className={"btn btn-alcohol"} type={"button"}>
                    <a href={"../notification"}>Alcohol melding maken</a>
                </button>
                <select className={"alcohol-drop p-4"}>
                    {data.map((neighborhood) => (
                        <option key={neighborhood._id.toString()} value={neighborhood._id.toString()}>
                            {neighborhood.Title}
                        </option>
                    ))}
                </select>
            </div>
        </main>
    )
}
export default Data

Inside the data.tsx i have a file that is page.tsx it will get the name of the data

import {getNeighborhoods} from '@util/mongodb/neighborhood';
import Data from './data'

export default async function Home() {
    const neighborhoodData = await getNeighborhoods()
    const data = await neighborhoodData.toArray()

    return (
        <main className="flex min-h-screen flex-col items-center justify-between p-24 md:container md:mx-auto">
            <div className="homepage-div flex">
                <div className="home p-4">
                    <h1 className={"text-2xl font-bold mb-2"}>Politieoverlast</h1>
                    <p className={"text-gray-700"}>Welkom bij "politieoverlast," jouw online bron voor het verkennen van
                        maatschappelijke uitdagingen en het bevorderen van bewustwording. Onze missie is om een dieper
                        begrip te creëren van problemen die onze samenleving beïnvloeden, en we beginnen met twee
                        cruciale datasets: alcoholoverlast en het mysterieuze "xxx."</p>
                    <br/>
                    <p className={"text-gray-700"}><b>Overlastscores voor Alcoholoverlast:</b> Dit is een probleem dat
                        vele gemeenschappen wereldwijd treft. Het overmatige gebruik van alcohol kan leiden tot ernstige
                        gevolgen, waaronder gezondheidsproblemen, sociale conflicten en veiligheidsrisico's. Op
                        "politieoverlast" hebben we overlastscores verzameld en geanalyseerd om te laten zien welke
                        gemeenten het meest getroffen zijn door alcoholgerelateerde problemen. We presenteren deze
                        scores op een schaal van 1 tot 100 om de ernst van de situatie duidelijk te maken.</p>
                    <div className={"home-btns flex flex-row "}>
                        <Data data={data}/>
                        <div className={"dropdown flex flex-col items-start"}>
                            <button className={"btn btn-other"} type={"button"}>
                                Andere dataset
                            </button>
                            <select className={"other-drop p-4"}>
                                <option value={"gemeente1"}>Gemeente 1</option>
                                <option value={"gemeente2"}>Gemeente 2</option>
                                <option value={"gemeente3"}>Gemeente 3</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    )
}

and than i have a results folder there in is a [id].tsx

import { useRouter } from "next/router";

function NeighborhoodDetail() {
    const router = useRouter();
    const { id } = router.query;

    return (
        <div>
            <h1>Neighborhood Detail Page</h1>
            <Data data={data} selectedNeighborhood={id} />
        </div>
    );
}

export default NeighborhoodDetail;

Solution

adding the router solved my problem

results.tsx

'use client'
import React from 'react';
import { useLocation } from 'react-router-dom';
export default function Results() {
    const location = useLocation();
    const { municipality } = location.state;
    return (
        <div className="flex min-h-screen flex-col items-center justify-between p-24 md:container md:mx-auto">
            <div className="resultspage-div flex">
                <div className="results p-4">
                    <h1 className={"text-2xl font-bold mb-2"}>Score</h1>
                    <div className={"currentresults"}>
                        <h3>Gemeentenaam: {municipality.Title}</h3>
                        <p>Score nu: 88</p>
                    </div>
                    <div className={"mt-5"}>
                        <h3>Voorspelling:</h3>
                        <p>Toekomst: 89</p>
                    </div>
                    <br/>
                    <p>Op "politieoverlast" gebruiken we een eenvoudig scoresysteem om de mate van overlast in verschillende gemeenten aan te geven. We begrijpen dat duidelijkheid belangrijk is, dus hier is een uitleg van onze scores, die variëren van 0 tot 100:</p>
                    <br/>
                    <p><b>0 tot 20:</b> Dit wordt beschouwd als een "Veilige" score. In gemeenten met een score in dit bereik is er over het algemeen weinig tot geen overlast gerelateerd aan alcoholproblemen. Bewoners kunnen zich hier over het algemeen veilig voelen.</p>
                    <br/>
                    <p><b>30 tot 60:</b> Dit wordt aangeduid als "Matige" overlast. Gemeenten met scores in dit bereik kennen een gematigd niveau van alcoholgerelateerde problemen. Het is belangrijk om bewust te zijn van mogelijke risico's, maar over het algemeen is er geen extreme alertheid nodig.</p>
                    <br/>
                    <p><b>60 tot 90:</b> Dit wordt beschouwd als "Gevaarlijke" overlast. In gemeenten met scores in dit bereik zijn er aanzienlijke problemen met betrekking tot alcoholgerelateerde overlast. Bewoners en bezoekers moeten voorzichtig zijn en maatregelen nemen om zichzelf te beschermen.</p>
                    <br/>
                    <p><b>90 tot 100:</b> Dit is "Heel Gevaarlijke" overlast. Gemeenten met scores in dit bereik worden geconfronteerd met zeer ernstige problemen met betrekking tot alcoholoverlast. Wees uiterst voorzichtig als u zich in deze gemeenten bevindt en zoek ondersteuning en begeleiding waar mogelijk.</p>
                    <br/>
                    <div className={"btn-results p-4"}>
                        <button className={"btn btn-back"} type={"button"}><a href={"../"}>Terug</a></button>
                    </div>
                </div>
            </div>
        </div>
    )
}

layout.tsx

'use client'
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import Footer from '@/components/footer'
import Header from '@/components/header'
import { BrowserRouter as Router } from 'react-router-dom';

const inter = Inter({ subsets: ['latin'] })

// export const metadata: Metadata = {
//   title: 'Create Next App',
//   description: 'Generated by create next app',
// }

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
    <Router>
      <body>
      <Header/>
      <main className={inter.className}>{children}</main>
      <Footer/>
      </body>
    </Router>
    </html>
  )
}

Answered By - B.Simsek