React-router v4. "정확한"소품이 중첩 된 루트를 금지합니까?

Question

만약 내가 "<Route path={'/'} exact component={Profile} />"을 만들면 "내포 된"요소가 중첩되지 않아 렌더링을 중지 할 수 없다는 것을 알았습니다.

내가 작성하려고하는 것은 프로필 및 주문 페이지가있는 간단한 앱입니다. 각 페이지에는 자체 사이드 바와 주문 항목의 목록이 있습니다. 현재 위치에 따라 올바른 순서 목록을 재구성하기 위해 각 페이지 내부에 중첩 된 경로를 사용합니다. 이 응용 프로그램을 완벽하게 만들려면 시작 위치에 프로필 페이지를 렌더링해야합니다 (예 : 'https://myapp.com').

모든 문서를 읽었으며 유일한 해결책은 경로 구성 요소에 '정확한'소품을 사용하는 것입니다. 하지만 너무 취약한 해결책입니다. 왜냐하면 사이드 바 또는 주문 목록 삭제에 중첩 된 경로를 사용하고 싶기 때문입니다.

'https://myapp.com'위치에 프로필 페이지를 표시 할 수있는 라우팅을 구축하는 방법은 없지만 중첩 된 경로를 사용할 수 있습니까? 내가 대신 <Redirect />를 사용

<Switch> 
    <Route path={'/'} exact component={Profile} /> 
    <Route path={'/orders'} component={Orders} /> 
    <Route component={NotFound} /> 
</Switch> 

class Profile extends Component { 
    render() { 
     return (
     <div className='profile_page'> 
      <Profile_Bar /> 

      <div className='content'> 
       <Switch> 
        <Route path={'/subscribers'} component={User_List} /> 
        <Route path={'/dashboard'} component={Dashboard} /> 
       </Switch> 
      </div> 
     </div> 
    ) 
    } 
} 

class Orders extends Component { 
    render() { 
     return (
     <div className='orders_page'> 
      <Orders_Bar /> 

      <div className='content'> 
       <Switch> 
        <Route path={'/active'} component={Orders_List} /> 
        <Route path={'/completed'} component={Orders_List} /> 
       </Switch> 
      </div> 
     </div> 
    ) 
    } 
} 

const NotFound = ({ location }) => (
    <div> 
    NotFound {location.pathname} 
    </div> 
) 

내 옛날 실현 :

<Switch> 
    <Redirect from='/' to='/profile'/> 
    <Route path={'/profile'} component={Profile} /> 
    <Route path={'/orders'} component={Orders} /> 
    <Route component={NotFound} /> 
</Switch> 

Answer 1

이상적으로 프로필 구성 요소가 '/ 프로필 등의 자신의 경로에서 처리 될 수

나의 현재 구현은 다음입니다 '라고 말하고 별도의 구성 요소를 만들면 집,'/ '경로 :

이 같은

<Switch> 
    <Route path={'/'} exact component={Home} /> 
    <Route path={'/profile'} component={Profile} /> 
    <Route path={'/orders'} component={Orders} /> 
    <Route component={NotFound} /> 
</Switch> 

... 다음 프로필 구성 요소는 것 하위 경로 :

<Switch> 
    <Route path={'/profile/subscribers'} component={User_List} /> 
    <Route path={'/profile/dashboard'} component={Dashboard} /> 
</Switch> 

---

당신이 정말로 다음 경로 경로에있는 '프로필'을 원하지 않는 경우에 당신은 할 수 두 경로 모두 프로필 구성 요소를 렌더링하지만 '/'경로는 자체 구성 요소로 처리해야합니다.

012 이렇게하면 '/ 구독자'및 '/ 대시 보드'경로를 기본 경로에 추가 할 수 있습니다.

---

다른 옵션은 '/ orders'가 '/'앞에 일치하도록 경로의 순서를 변경하는 것입니다. '/'경로에서 정확한을 제거하면 하위 경로도 일치합니다.

이 경우에는, 그러나, 당신은 적합하지 않은 프로필 구성 요소에 NOTFOUND 경로를 처리해야합니다.

<Switch> 
    <Route path={'/orders'} component={Orders} /> 
    <Route path={'/'} component={Profile} /> 
</Switch>