javascript - How to programmatically navigate to other page in Next.js? - Stack Overflow

admin管理员组

文章数量:1291335

After a post request to an external API, I would like to redirect back to the homepage. I do have some knowledge with React and this is my first time using Next.js. Here is the code:

export default function New({genres}) {
const createMovie = (values) => {
    console.log(values);
    axios.post(`${process.env.NEXT_PUBLIC_BASE_URL}/movies`, {
        title: values.title,
        description: values.description,
        genres: values.genres,
        release_date: values.release_date,
        cover_url: values.cover_url
    }).then(res => {
        const router = useRouter();
        router.push('/');
    })
}

As you can see I used router.push() but I get this error:

Error: Invalid hook call. Hooks can only be called inside of the body of a function ponent. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

What is the most efficient way to redirect to other pages in Next.js after a function and/or requests?

After a post request to an external API, I would like to redirect back to the homepage. I do have some knowledge with React and this is my first time using Next.js. Here is the code:

export default function New({genres}) {
const createMovie = (values) => {
    console.log(values);
    axios.post(`${process.env.NEXT_PUBLIC_BASE_URL}/movies`, {
        title: values.title,
        description: values.description,
        genres: values.genres,
        release_date: values.release_date,
        cover_url: values.cover_url
    }).then(res => {
        const router = useRouter();
        router.push('/');
    })
}

As you can see I used router.push() but I get this error:

Error: Invalid hook call. Hooks can only be called inside of the body of a function ponent. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

What is the most efficient way to redirect to other pages in Next.js after a function and/or requests?

• javascript
• reactjs
• next.js

Share Improve this question Follow asked Feb 5, 2021 at 21:19 user15067897user15067897 3

• Why don't you call router.push() from within the ponent? – elMeroMero Commented Feb 5, 2021 at 21:24
• @elMeroMero Because the navigation should only occur after the post request is done. That's why I put it inside then() – user15067897 Commented Feb 5, 2021 at 21:27
• yes but you are calling createMovie from within the ponent, right? If so, let createMovie only return true or success message as a promise and let the ponent take care of the .then(res => { const router = useRouter(); router.push('/'); }) part. – elMeroMero Commented Feb 5, 2021 at 21:30

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

You need to move where you call useRouter(). You can keep router.push() where it is.

export default function New({genres}) {
    const router = useRouter();
    const createMovie = (values) => {...}
}

If you look at the Rules of Hooks, you can only call the hook, useRouter() in this case, at the top level.

I also had my initialization of useRouter in my function. I fixed the same bug by placing that line into my function ponent instead of my function and calling router.push(...) in the function itself.

本文标签： javascriptHow to programmatically navigate to other page in NextjsStack Overflow