여러 라우터를 반응으로 처리하는 방법

여러 라우터를 반응으로 처리하는 방법

웹 어플리케이션이 있다고 칩시다.일반적으로 인덱스 페이지, 관리 패널, 도움말 페이지, 연락처 등 많은 보기가 있습니다.main index.js에서 react-router-dom을 사용하여 취급하고 있습니다만, 정상적으로 동작하고 있습니다.

하지만 지금은 관리 패널을 개발하는 데 어려움을 겪고 있습니다.index.js 라우터에서 지원되는 루트 중 하나이지만 관리자가 사용할 수 있는 모든 액션을 포함하는 자체 메뉴가 포함되어 있습니다.

index.js 라우터에서처럼 콘텐츠 전체를 대체하지 않고 관리 패널에서 필요한 콘텐츠만 대체하려면 어떻게 해야 합니까?

콘텐츠 치환을 위해 관리 패널플레이스에서 를 사용하려고 했는데 재귀가 너무 많거나(관리 패널 자체의 루트를 복제한 경우) 아무 말도 하지 않습니다.

나는 리액션 초보이고 이 문제를 어떻게 말해야 할지조차 모르겠다.

제안해 주셔서 감사합니다.

제가 당신의 문제를 제대로 이해한다면, 당신은 루트를 네스트함으로써 그것을 할 수 있습니다.react-module 4.x.x:render Router 또는 Browser Router 등의 컴포넌트(https://reacttraining.com/react-router/web/api/Router)를 1회, 최상위 레벨로 렌더링한 후 Route 컴포넌트를 nest로 하는 경우의 예.이 경우 index.js에 메인 라우터가 있기 때문에 다음과 같습니다.

<BrowserRouter>
   <Route path="/" exact component={Main} />
   <Route path="/some-page" component={SomePage} />
   <Route path="/admin" component={Admin} />
</BrowserRouter>

그럼, 네 안에서Admin컴포넌트는 다른 라우터를 작성하지 않고 루트를 다시 렌더링하면 다음과 같이 됩니다.

<div className="admin-panel-container">
  <AdminMenu />
  <Route path="/admin/users" component={AdminUsers} />
  <Route path="/admin/groups" component={AdminGroups} />
</div>

따라서 URL이 일치하면/admin곧 알게 될 것이다AdminMenu및 컴포넌트를 사용하여 특정 뷰를 관리 패널에 표시할 수 있습니다.특정 애플리케이션에 따라 /admin에서 /admin/users 또는 일부 대시보드로 리디렉션할 수 있습니다.

메인 라우터를 둘러싼 레이아웃 요소가 관리 루트에서 삭제되는 경우 코드 예를 보지 않고서는 더 이상 말하기 어렵지만 각각 메뉴, 헤더 등을 포함하는 레이아웃과 AdminLayout의 두 가지 컴포넌트를 만들 수 있습니다.관리 경로인지 일반 사용자 경로인지에 따라 모든 경로에서 사용할 수 있습니다.

react-router-dom 6.2.1에서는 다음과 같이 동작했습니다.

1. 메인 페이지 라우터의 경우 index.js(또는 App.js)에서 admin/:

    <BrowserRouter>
        <Routes>
            <Route path="/" exact element={<Main />} />
            <Route path="/some-page" element={<SomePage />} />
            <Route path="/admin/*" element={<Admin />} />
        </Routes>
    </BrowserRouter>
   

2. 탐색 모음의 경우:

    <div className="links">
        <Link to="/">Main</Link>
        <Link to="/some-page">Some Page</Link>
        <Link to="/admin">Admin Page</Link>
    </div>
   

3. admin 페이지 라우터의 경우 경로의 admin/ 부분을 반복해서는 안 됩니다.

    <div className="admin-panel-container">
        <AdminMenu />
        <Routes>
            <Route path="/users" element={<AdminUsers />} />
            <Route path="/groups" element={<AdminGroups />} />
        </Routes>
    </div>
   

4. 단, admin 네비게이션바에서 경로에는 admin/part가 포함되어 있어야 합니다.

    <div className="admin-links">
        <Link to="/admin/users">Explore Users</Link>
        <Link to="/admin/groups">Explore Groups</Link>
    </div>
   

언급URL : https://stackoverflow.com/questions/49473727/how-to-handle-multiple-routers-in-react