Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Router.replace from createLocalizedPathnamesNavigation causes infinite render #1198

Closed
3 tasks done
AlexandreMouyen opened this issue Jul 12, 2024 · 1 comment · Fixed by #1201
Closed
3 tasks done
Labels
bug Something isn't working

Comments

@AlexandreMouyen
Copy link

AlexandreMouyen commented Jul 12, 2024

Description

Hello,

I found that the router.replace function from createSharedPathnamesNavigation differs from others router (createSharedPathnamesNavigation or even next/navigation).

I think it is some kind of issue.

Verifications

  • I've verified that the problem I'm experiencing isn't covered in the docs.
  • I've searched for similar, existing issues on GitHub and Stack Overflow.
  • I've compared my app to a working example to look for differences.

Mandatory reproduction URL

App Router

Reproduction description

Create a simple client component with router.replace on useEffect.

"use client"

import {useEffect} from "react";
import {usePathname, useRouter} from "../navigation";

export function TestComponent() {
    const router = useRouter();
    const pathname = usePathname();

    useEffect(() => {
        console.log("render", pathname)
        router.replace(pathname, {scroll: false})
    }, [router]);

    return <h1>Hello</h1>;
}

Try with the router returned from createSharedPathnamesNavigation and createLocalizedPathnamesNavigation. The sharred one work as expected (like the next/navigation one for example). But the localized one causes infinte render with the exact same code.

import {createLocalizedPathnamesNavigation, createSharedPathnamesNavigation} from 'next-intl/navigation';

export const locales = ['en'] as const;

export const defaultLocale = 'en' as const;

// Use the default: `always`
export const localePrefix = undefined;

export const {Link, redirect, usePathname, useRouter} =
    // Only change the code here to createSharedPathnamesNavigation
    createLocalizedPathnamesNavigation({
        pathnames: {},
        locales,
        localePrefix
    });

Expected behaviour

Working like others router.replace functions. For sure, it is pretty easy to avoid.

@amannn
Copy link
Owner

amannn commented Jul 15, 2024

Thanks for the report, this will be fixed in #1201

@amannn amannn removed the unconfirmed Needs triage. label Jul 15, 2024
@amannn amannn closed this as completed in a1b9a36 Jul 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
2 participants