Блог

Я использую 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, он не работает, и состояние замены Windows — плохая идея. Вкладки будут выглядеть следующим образом.

      Sample Exam          |        Test Exam
  

если вы нажмете sample exam, в нем будут показаны данные образца, совпадающие с тестом, но они должны быть на той же странице.

Спасибо.

Старый пост, но кто-то может счесть его полезным:

Проблема в том, что вы не можете выполнить мелкий маршрут '/test/1' '/test/1/exam' , потому что nextjs использует маршрутизацию на основе файловой системы. Внутри вашего каталога pages 'test/1' будет указывать на test/1/index.js или, если вы используете динамические пути, это так test/[id].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