반응 - 동적 라우팅

우리는 무엇을 배울 것입니까?

동적 라우팅을 구현하는 방법입니다.

일종의 내비게이션에 대한 경로 변경 사항을 미러링하는 방법입니다.

"찾을 수 없음"페이지를 구현하는 방법입니다.

메모

이 예에서는 UI 구성 요소 팩React Suite을 사용합니다.

코드를 찾을 수 있습니다here.

1. 사이드바 탐색에 대한 동적 라우팅 및 미러링 변경 구현

여기에서 경로 목록을 만들어야 합니다.

export const Router = [
    {
        title: "Home",
        icon: <FolderFillIcon />,
        route: "",
        component: <Home />
    },
    {
        title: "About us",
        icon: <GridIcon />,
        children: [
            {
                title: "Contact us",
                icon: <ReviewIcon />,
                route: "/contact-us",
                component: <Contact />
            },
            {
                title: "Become a partner",
                icon: <GlobalIcon />,
                route: "/partner-program",
                component: <PartnerProgram />
            }
        ]
    }
]

제목 - 내비게이션의 경로 이름입니다.

아이콘 - React Suite의 적합한 아이콘 구성 요소

경로 - 페이지 경로

구성 요소 - 현재 경로에서 렌더링하려는 페이지를 나타냅니다

.

내비게이션 구성 요소를 만들 차례입니다.
내비게이션은 rsuite의 Sidenav 구성 요소를 통해 구현됩니다.

현재 경로에 자식이 있는 경우 일종의 탐색 메뉴(드롭다운)를 렌더링하고 자식을 사용하여 탐색 항목(링크)으로 표시해야 합니다.

현재 경로에 자식이 없으면 간단한 탐색 항목(링크)을 렌더링합니다.

탐색 논리의 이 부분은 NavigationItem 구성 요소를 통해 구현됩니다.

export const NavigationItem = ({ icon, route, title, childRoutes }) => {
  const navigate = useNavigate();

  return (
    <>
      {childRoutes && (
        <Nav.Menu title={title} icon={icon}>
          {childRoutes &&
            childRoutes.map((x) => {
              return (
                <Nav.Item
                  onClick={() => navigate(x.route)}
                  children={x.title}
                  icon={x.icon}
                />
              );
            })}
        </Nav.Menu>
      )}
      {!childRoutes && (
        <Nav.Item
          onClick={() => navigate(route)}
          children={title}
          icon={icon}
        />
      )}
    </>
  );
};

내비게이션 구성 요소 구현은 다음과 같아야 합니다.
경로는 Nav 구성 요소 내의 NavigationItem 구성 요소를 통해 렌더링됩니다.

export const Navigation = ({
  appearance,
  expanded,
  onOpenChange,
  onExpand,
  ...navProps
}) => {
  return (
    <div className={"navigation"}>
      <Sidenav
        appearance={appearance}
        expanded={expanded}
        onOpenChange={onOpenChange}
      >
        <Sidenav.Body>
          <Nav {...navProps}>
            {Router.map((x) => {
              return (
                <NavigationItem title={x.title} route={x.route} icon={x.icon} childRoutes={x.children} />
              );
            })}
          </Nav>
        </Sidenav.Body>
        <Sidenav.Toggle onToggle={onExpand} />
      </Sidenav>
    </div>
  );
};

모양 - React Suite에서 정의한 메뉴 스타일

expand - 사이드바가 확장되는지 여부

onOpenChange - 탐색 열기 콜백 함수

onExpand - 탐색 확장 콜백 함수

동적 라우팅 구현의 마지막 단계는 App.js에서 레이아웃을 정의하고 거기에 있는 모든 경로를 일종의 "컨테이너"에 매핑하여 현재 경로의 콘텐츠가 적절하게 렌더링될 수 있도록 하는 것입니다.

export const App = () => {
  const [expanded, setExpand] = React.useState(true);
  const routes = Router.filter((r) => r.title).concat(
    Router.filter((r) => r.children && r.children.length)
      .map((r) => r.children)
      .flat()
  );

  return (
    <>
      <div>
        <Container>
          <Sidebar
            className={'sidebar'}
            width={expanded ? 260 : 56}
            collapsible
          >
            <Navigation
              expanded={expanded}
              onExpand={setExpand}
            />
          </Sidebar>
          <Content>
            <Routes>
              {routes.map((x) => {
                return (
                  <>
                    <Route path={x.route} element={x.component} />
                  </>
                );
              })}
              <Route path={"*"} element={<NotFound />} />
            </Routes>
          </Content>
        </Container>
      </div>
    </>
  );
};

2. "찾을 수 없음" 페이지 생성.

사용자가 브라우저 검색 표시줄에 임의의 경로를 입력하는 경우 고전적인 "찾을 수 없음"페이지로 리디렉션하는 것이 좋습니다.



우리가 해야 할 일은 NotFound React 구성 요소(페이지)를 만드는 것입니다.

export const NotFound = () => {
    return (
        <Page header={'Content not found!'}>
            <GearIcon spin className={'gear-icon'} />
        </Page>
    )
}

이것이 작동하는지 확인하기 위해 마지막으로 해야 할 일은 App.js의 라우터에 수동으로 NotFound 페이지를 추가하는 것입니다. 마지막 경로로 추가해야 합니다.

<Route path={'*'} element={<NotFound />} /> 

읽어 주셔서 감사합니다!