Как изменить URL-адрес без обновления до следующей страницы с помощью Next Js useRouter?

Question

Я использую Next.js и хочу знать, как изменить URL-адрес на той же странице, не обновляя его. Я использую shallow=true, но он все равно выводит на следующую страницу.

Это мой код:

<Tabs>
   <Tab href='test/1' label='Sample Exam'/>
   <Tab href='test/1/exam' label='Test Exam'/>
</Tabs>
<TabPanel value={tabvalue} index={0}>
   <SampleComponent />
</TabPanel> 
<TabPanel value={tabvalue} index={1}>
   <TestComponent />
</TabPanel> 

Это логика, но не работает

    const [tabValue, setTabValue] = React.useState(0);
    const router = useRouter();
    const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
        setTabValue(newValue);
        useEffect(() => {
            router.replace('/test/1', '/test/1/exam', { shallow: true});
        }, []);
    };

Я уже тестировал router.push, он не работает, и состояние замены окон - плохая идея. Вкладки будут выглядеть так.

     Sample Exam          |        Test Exam

Если вы нажмете "Образец экзамена", он отобразит детали образца так же, как и тест, но он должен быть на той же странице.

Благодарю.

Answer 1

Старый пост, но может кому пригодится:

Проблема в том, что вы не можете мелкий маршрут '/test/1'to , потому что nextjs использует маршрутизацию на основе файловой системы. Внутри каталога ваших страниц будет указывать на test/1/index.jsили если вы используете динамические пути, это . Однако '/test/1/exam'укажет на test/1/exam/index.jsили, в случае динамических путей, это может быть test/[id]/exam/index.js. Эти два файла не находятся на разных уровнях, поэтому неглубокая маршрутизация не будет работать.

Вы можете попробовать добавить запрос, например: test/1?show=exam, потому что это можно обработать только с 1 файлом: test/[id].js. Поверхностная маршрутизация будет работать таким образом.

Другой способ — отобразить что-то и в случае пробного экзамена. например, вместо использования 'test/1'возможно 'test/1/sample'а также 'test/1/exam'останется. В этом случае один файл сможет обрабатывать два отдельных параметра с неглубокой маршрутизацией: test/[id]/[slug].js

Подробнее: https://nextjs.org/docs/routing/introduction И https://nextjs.org/docs/routing/dynamic-routes