Next.js Discord

Discord Forum

Creating a route for a folder that has 2 files: page.tsx & registerSuccess.tsx

Unanswered
Japanese common catfish posted this in #help-forum
Open in Discord
Japanese common catfishOP
I want to create a route that goes from the page file to the registerSuccess file. I'm using useRouter like this:
page.tsx:
import { useRouter } from 'next/navigation'

const Register = () => {

const router = useRouter()

useEffect(() => {
        if (showSuccessScreen){
            const queryString = new URLSearchParams({ teamName, selectedTier }).toString();
            router.push(`/register/registerSuccess?${queryString}`);
        }
    }, [showSuccessScreen, router, teamName, selectedTier]);

return (
  )
}
export default Register;

im getting a 404 error not found when i try to get to that page

5 Replies

Alan
With the app router the only tsx files that get rendered are the ones called page.tsx. You'll want to create a folder with the name of your route, move registerSuccess.tsx to that folder, and then rename it to page.tsx
Japanese common catfishOP
oh i see, i made a new folder and named it to page.tsx tyy
im getting this error now: Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
i am using import { useRouter } from 'next/navigation' in the app dir
the files that i am using useRouter in are 'use client' files
Japanese common catfishOP
turns out i had to use import { useSearchParams } from 'next/navigation' instead of the 'query' object

https://nextjs.org/docs/app/api-reference/functions/use-search-params