클라이언트 및 서버 측에서 다른 구성 요소를 렌더링하십시오.

Question

현재 반응 형, 반응 형 라우터 및 저가형을 사용하는 웹 사이트를 개발 중입니다. 우리는 서버 측 렌더링을하고 있고 서버에서도 반응 라우터를 사용하고 있습니다. 이제는 클라이언트 쪽에서 서버 쪽과 다른 구성 요소를 렌더링해야하는 경우가 있습니다. 나는 이렇게하고 싶다.

클라이언트 측

<Route path="welcome/:id" component={Home} /> 

서버 측

<Route path="welcome/:id" component={App} /> 

나는 사용자가 클릭 내가 내용 모달를 열고 이미지를 추천하고 싶은 이미지의 경우와 같은 사용 사례가 있습니다. 사용자가 추천 이미지를 클릭하면 같은 모달이 세부 정보를 채워야하며 경로도 변경하고 싶습니다. 새 창에서 열 때 동일한 경로가 페이스 북과 메타 태그에서 메타 태그를 스크랩하기위한 html 페이지를 열어야합니다.

그래서 클라이언트와 서버에 다른 구성 요소를 렌더링합니다. 하지만 너무 문제가 있기 때문에 서버가 렌더링 된 페이지를 제공 할 때 클라이언트 측 반응 라우터를 끄는 방법을 찾아야하기 때문에 문제가 있습니다.

또는 클라이언트 측에서는 URL을 변경하지만 구성 요소를 렌더링하지 않는 의사 경로 변경을 생성합니다.

Answer 1

확인 window가 있고 조건이처럼 사용할 구성 요소를 설정 한 경우 : 나를

let Handler; 

if (typeof window !== 'undefined') { 
    Handler = Home; 
} else { 
    Handler = App; 
} 

return <Route path="welcome/:id" component={Handler} /> 

괴수가이 :)

Answer 2

검사 과정을하고있는 이유를 알고 싶어합니다. env.Browser

let Handler; 

if (process.env.browser) { 
    Handler = Home; 
} else { 
    Handler = App; 
} 

return <Route path="welcome/:id" component={Handler} />