Блог

Я новичок в NextJS и React и хочу создать некоторую динамическую маршрутизацию. У меня есть родительская страница, которая вызывает дочерний компонент, который показывает некоторую навигацию.

В моем родительском компоненте у меня есть макет, который включает заголовок и правую боковую панель, которые будут отображаться на каждой странице, но в зависимости от ссылки, которая нажата в моем навигационном компоненте, содержимое тела изменится.

Мой родительский компонент:

 import React from 'react';

import { Header } from './Header;
import { SubNav } from './SubNav;
import { Sidebar } from './Sidebar;

export const AboutPage = () => {
  return (
    <>
      <Header />
      <SubNav />

      <div className="content">
        >>>I want to do something like this <<<
        {section === history amp;amp; <History />}
        {section === contact amp;amp; <Contact />}
          .....
      </div>

      <Sidebar />
    </>
  );
};
  

В моем дочернем навигационном компоненте я сопоставляю некоторые данные, которые включают «значение» для каждого отдельного раздела, который я определил в массиве.

 <NavButtons
  onClick={() => {
    const path = AppRoute.ABOUT.replace(':section', 'value');
    router.push(path, path, { shallow: true });
  }}
/>

  

Страница правильно маршрутизируется со значением раздела, изменяющимся каждый раз, когда я нажимаю на другую кнопку навигации, но я не могу изменить содержимое в родительском компоненте, я попытался создать функцию в родительском компоненте, которая получит значение от дочернего элемента, чтобы я мог использовать его для определения значения раздела.разделы в родительском, но в конечном итоге создается бесконечный цикл. Запутался в том, как заставить их работать вместе.

Вы можете определить путь с useRouter помощью хука. Затем вы можете проверить в инструкции switch case, на каком сайте находится пользователь, и отобразить компоненты для маршрута.

 import { useRouter } from next/router
  

Внутри компонента

 const router = useRouter();
  

Функция для возврата компонента

 function renderSidebar(pathname){
switch(pathname){
...
}
  

Внутри функции визуализации

 { renderSidebar(router.pathname) }
  

Смотрите дальнейшее использование в документах
NextJS https://nextjs.org/docs/api-reference/next/router

         import React from 'react';
        import {useState} from 'react';
        import { Header } from './Header';
        import { SubNav } from './SubNav';
        import { Sidebar } from './Sidebar';
        
        export const AboutPage = () => {
            const [section,setSection] = useState()
            sectionHandler = (section) => {
             setSection(section)
            }
          return (
            <>
              <Header />
              <SubNav />
        
              <div className="content">
                >>>I want to do something like this <<<
                {section === history amp;amp; <History />}
                {section === contact amp;amp; <Contact />}
                  .....
              </div>
        
              <Sidebar />
            </>
          );
        };
    
  

и в вашем дочернем компе

      <NavButtons
      onClick={() => {
        const path = AppRoute.ABOUT.replace(':section', 'value');
        props.sectionHandler(section)
        router.push(path, path, { shallow: true });
      }}
     />
  

не забудьте передать sectionhandler от родительского к дочернему компоненту