React Router v4의 중첩 경로

React Router v4의 중첩 경로

---

공통 레이아웃을 추가하기 위해 일부 중첩 경로를 설정하려고합니다. 코드를 확인하십시오.

  <Router>
    <Route component={Layout}>
      <div>
        <Route path='/abc' component={ABC} />
        <Route path='/xyz' component={XYZ} />
      </div>
    </Route>
  </Router>

이것이 완벽하게 작동하지만 여전히 경고가 표시됩니다.

경고 : 동일한 경로에서 <Route component> 및 <Route children>을 사용해서는 안됩니다. 무시됩니다

---

CESCO의 답변은 먼저 구성 요소 AppShell 를 렌더링 한 다음 내부 구성 요소 중 하나를 렌더링합니다 Switch. 그러나 이러한 구성 요소는 내부 AppShell에서 렌더링 되지 않으며의 자식이 아닙니다 AppShell.

랩 구성 요소 V4에서 당신은 더 이상 당신의 두지 않는 Route또 다른 내부의를 Route당신은 당신 넣어, Route구성 요소 내부에 직접들.
IE : 래퍼 대신 <Route component={Layout}>직접 사용 <Layout>합니다.

전체 코드 :

  <Router>
    <Layout>
      <Route path='/abc' component={ABC} />
      <Route path='/xyz' component={XYZ} />
    </Layout>
  </Router>

변경 사항은 React Router v4를 순수한 React로 만드는 아이디어로 설명 될 수 있으므로 다른 React 요소와 마찬가지로 React 요소 만 사용합니다.

편집 : Switch여기서 유용하지 않기 때문에 구성 요소를 제거했습니다 . 여기 에서 유용 할 때를 확인 하세요 .

---

잘 작동하려면 스위치 구성 요소를 사용하여 중첩해야합니다. 또한이 질문을 참조하십시오

// main app
<div>
    // not setting a path prop, makes this always render
    <Route component={AppShell}/>
    <Switch>
        <Route exact path="/" component={Login}/>
        <Route path="/dashboard" component={AsyncDashboard(userAgent)}/>
        <Route component={NoMatch}/>
    </Switch>
</div>

그리고 버전 -4 구성 요소는 자식을 가져 오지 않습니다. 대신 render prop을 사용해야합니다.

<Router>
    <Route render={(props)=>{
      return <div>Whatever</div>}>
    </Route>
  </Router>

---

시험:

<Router>
    <Layout>
        <Route path='/abc' component={ABC} />
        <Route path='/xyz' component={XYZ} />
    </Layout>
</Router>

---

Layout로드 된 상태에서 실행 하지 않으려면 . 이 방법을 사용하십시오.

<div className="container">
    <Route path="/main" component={ChatList}/>
    <Switch>
        <Route exact path="/" component={Start} />
        <Route path="/main/single" component={SingleChat} />
        <Route path="/main/group" component={GroupChat} />
        <Route path="/login" component={Login} />
    </Switch>
</div>

때마다 역사의 변화, componentWillReceiveProps ChatList에서 실행됩니다.

---

다음을 시도해 볼 수도 있습니다.

<Route exact path="/Home"
                 render={props=>(
                                 <div>
                                      <Layout/>
                                      <Archive/>
                                </div>
                       )} 
    />

참고 URL : https://stackoverflow.com/questions/42095600/nested-routes-in-react-router-v4