부모를 통해 자식 구성 요소를 렌더링하십시오.

Question

다른 경로로 구성 요소를 렌더링해야하지만이 구성 요소가 모든 페이지를 포함하지 않아야합니다. 예를 들어, I에 유래 목록에서 몇 가지 질문에 클릭, 나는 오른쪽에서 왼쪽 모달까지 애니메이션을 받게됩니다보다는, 나는 또한

(나는 V4를 사용하고 있습니다)

라우터 반응 경로를 변경해야

export default (
    <Switch> 
    <App> 
     <Route exact={true} path="/" component={App} /> 
     <Route exact={true} path="/product/:id" component={Product}/> 
    </App> 
    </Switch> 
); 

내 제품 용기는

export default function productContainer(ChildComponent) { 
    class ProductContainer extends Component { 
    render =() => { 
     return <ChildComponent/> 
    } 
    } 

    return ProductContainer; 
} 

그리고 내 제품 구성 요소처럼 보인다

제가 위에서 설명 나는 상황을 모방

class Product extends Component { 
    render =() => { 
    return ("") 
    } 
} 

export default productContainer(Product); 

, 내 페이지가 완전히 rerendred 나는

내가이 문제를 해결하는 방법을, 어떤 생각을 가지고 내 응용 프로그램 구성 요소 페이지 표시되지 않는 이유는 무엇입니까?

Answer 1

사람들은 다시 렌더링하지 않고 반응 라우터에서 모달을 경로로 렌더링하는 방법을 요청했습니다 (현재 토론을 찾을 수 없음). 본질적으로 반응 라우터에서는 이것이 불가능합니다. 각 경로가 변경되면 다시 렌더링됩니다. 즉, 경로를 중첩하여 원하는 것을 할 수 있습니다.

각 구성 요소는 경로를 반환 할 수 있으므로 composition을 사용하여 경로를 렌더링 할 위치를 선택할 수 있습니다. 예를 들어

,

export default (
    <Switch> 
    <App> 
     <Route path="/" component={App} /> 
    </App> 
    </Switch> 
); 

<App /> 내부 -

render() { 
    return (
     <Something> 
      <PageHeader /> 
      <Switch> 
       <Route path="/product/:id" component={Product}/> 
      </Switch> 
     </Something> 
    ); 
} 

당신이 App 구성 요소, 그들이 할 수있는 모든 공유 공통의 페이지 레이아웃 내부에 경로를 추가한다면 그래서 당신은 볼 수 있습니다.

주의 사항 : 모든 구성 요소는 스위치 내에서 여러 경로 또는 단일 경로를 반환 할 수 있습니다. 스위치는 일치하는 첫 번째 경로 만 렌더링합니다.

는 또한 기억 : 스위치 내부 경로가 직접 아이를해야합니다, 당신은 Switch -> App -> Route을 가질 수 없습니다, 그것은 항상 Switch -> Route

Answer 2

사용이 경로에 재산 대신 구성 요소를 렌더링과 같은 직접 자식이어야.

<Route exact={true} path="/" render={() => (
    <div> 
     <App /> 
     <Route exact={true} path="/product/:id" component={Product}/> 
    </div> 
)} />