라우팅 할 때 구성 요소가 해제되지 않도록 방지

Question

상위 구성 요소에서 라우팅 할 때 보관해야하는 하위 구성 요소가 있습니다. 웹 검색은 대부분 "react-router"에 대한 답변이지만 "react-router-dom"(일명 React Router V4)을 사용하고 있습니다. Im 반응이 상당히 새롭고, 이것이 마운트 해제되지 않았거나 이와 유사한 것으로 플래그를 지정하는 것과 같이 매우 간단해야한다고 생각했습니다.

import Home from "./home/Home"; 
import Top from "./top/Top"; 

export default class Layout extends React.Component{ 
    render(){ 
     return(
      <Router> 
       <div class="wrp"> 
        <Menu/> 
        <section class="left"> 
         <Header/> 
         <Switch> 
          <Route exact path="/" component={Home} /> 
          <Route exact path="/top" component={Top} /> 
         </Switch> 
         <Footer/> 
        </section> 
       </div> 
      </Router> 
     ); 
    } 
} 

"홈"구성 요소에는 DOM에 있어야하는 하위 구성 요소가 있습니다.

홈 및 하위 구성 요소 코드의 요청에 따라 :

import React from "react"; 

import Sponsor from "./Sponsor"; 
import Feature from "./Feature"; 
import Top from "./Top"; 
import Discord from "./Discord"; 
import Middle from "./Middle"; 

export default class Home extends React.Component{ 
    render(){ 
     return(
      <section class="main_wrp"> 
       <Sponsor/> 
       <div class="bulk"> 
        <Feature/> 
        <div class="co6"> 
         <Top/> 
         <Discord/> 
        </div> 
        <Middle/> 
       </div> 
      </section> 
     ); 
    } 
} 

하위 구성 요소 (불화) :이 집 밖으로 <Discord\> 구성 요소를 가지고하는 일을

import React from "react"; 

export default class Discord extends React.Component{ 

    render(){ 
     return(

      <div class="DiscordViewer"> 
       <embed height='500px'src='https://somelink.com' /> 
      </div> 
     ); 
    } 
} 

Answer 1

한 가지 가능한 방법을 . 레이아웃에서 <Discord\> 구성 요소를 만들고 다른 모든 구성 요소에 하위 구성 요소로 전달합니다.

레이아웃

export default class Layout extends React.Component{ 
    render(){ 
     let discord = <Discord/>; 
     return(
      <Router> 
       <div class="wrp"> 
        <Menu/> 
        <section class="left"> 
         <Header/> 
         <Switch> 
          <Route exact path="/" render={()=><Home>{discord}</Home>} /> 
          <Route exact path="/top" render={()=><Top>{discord}</Top>} /> 
         </Switch> 
         <Footer/> 
        </section> 
       </div> 
      </Router> 
     ); 
    } 
} 

그리고 홈 구성 요소는

export default class Home extends React.Component{ 
    render(){ 
     return(
      <section class="main_wrp"> 
       <Sponsor/> 
       <div class="bulk"> 
        <Feature/> 
        <div class="co6"> 
         <Top/> 
         {this.props.children} 
        </div> 
        <Middle/> 
       </div> 
      </section> 
     ); 
    } 
} 

당신은 대신 그것을 전달하는, 그것을 보여주기 위해 필요한 모든 구성 요소로 명명 된 소품으로 <Discord/> 구성 요소를 전달할 수 있습니다 될 것 하위 구성 요소로

Answer 2

구성 요소 트리를 수정하지 않고 부모 노드에서 탐색 한 후 리프 노드 구성 요소 (이 예제에서는 Discord)를 보존하면 트리 정의가 위반됩니다. CSS를 사용하여 구성 요소를 단순히 숨기거나 재배치 할 수는 없지만 가장 가까운 상위 노드에서부터 해당 리프 노드로 연결된 트리의 전체 분기에 대해 그렇게해야합니다.

당신이 당신의 구성 요소 구조의 유연한 경우

const HomeWrapper = withRouter(props => (
    <div style={props.location.pathname !== '/' ? {display: 'none'} : {}}> 
    <Home {...props} /> 
    <div> 
)) 

<HomeWrapper /> 
<Switch> 
    <Route exact path="/top" component={Top} /> 
    <Route exact path="/other" component={OtherComponent} /> 
</Switch> 

, 당신은 숨겨진에 홈 경로에서 당신의 불화 구성 요소를 이동할 수 있습니다 : 그것은과 같이 수행 할 수 있지만이 가능성이 원치 않는 복잡성과 성능이 저하 될 것입니다 div. 그런 다음 반응이없는 DOM 조작을 사용하여 외부 숨겨진 div와 Home 내의 표시된 div 사이의 불일치를 이동합니다. Home 구성 요소에서 DiscordWrapper 구성 요소를 아래에 표시 할 수 있습니다. shouldComponentUpdate에서 false를 반환하여 업데이트를 차단하려고합니다. :

<div id='discord-wrapper-external' style={{display: 'none'}}> 
    <Discord id='discord-dom-node'/> 
</div> 

class DiscordWrapper extends React.Component { 
    componentDidMount() { 
    this.el = document.getElementById('discord-dom-node') 
    document.getElementById('discord-wrapper-internal').appendChild(this.el) 
    } 
    shouldComponentUpdate() { 
    return false 
    } 
    componentWillUnmount() { 
    document.getElementById('discord-wrapper-external').appendChild(this.el) 
    } 
    render() { 
    return <div id='discord-wrapper-internal' /> 
    }