Router.refresh() not refreshing in next 13?

Question

'use client';

import { useRouter } from "next/navigation";

export default function Todo({ todo }) {
    const router = useRouter();
    return (
        <>
            <li key={todo.id}>
                <input type='checkbox' checked={todo.isDone} onChange={(e) => update(todo.id, e.target.checked, router.refresh)}></input>
                {todo.name}
                <button onClick={() => todoDelete(todo.id, router)}>Delete</button>
            </li>
        </>
    )

    async function todoDelete(id, router) {
        await fetch(`/api/todo/delete?id=${id}`, {
            method: 'DELETE',
    
        });
        router.refresh();
    }
    
}

The code seems to jump right over the refresh() function, but the rest of the API call is working fine. Anyone know why I'm unable to refresh?

Answer 1

Also as solution is using native reload page from JS

// Refresh the page
location.reload();

Answer 2

I was having a similar issue. In my case, I did router.refresh(); first followed by router.push('/users') to navigate back to the data table from the update page.

However, the correct implementation would be to do router.push('/users') first, followed by router.refresh();.