는 라우터 기반 링크가 제대로

Question

을 지시하지 반작용 내가 가지고있는 다음과 같은 구성 요소 ...

import React from 'react'; 
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router' 

class Bottom extends React.Component { 

    constructor(){ 
     super(); 
     this.state = {link:"Don't have an account?"} 
    } 

    render(){ 

     return (
      <div> 
      <div className="sub-login"> 
       <p>{this.state.link}<Link to="/register"> Register here</Link></p> 
      </div> 
      </div> 

     ); 
    } 
} 

export default Bottom; 

당신은 내가 사용자가 클릭하면 가고 싶은 페이지에 <Link> 포인팅이 볼 수 있듯이.

이 구성 요소는 <Register />이라는 다른 클래스로 묶입니다.

그리고 나는, /register에 URL을 변경하지만 페이지의 콘텐츠는 여전히 <Index />입니다 홈 페이지의를 다음과 같은 경로 ... Link 클릭

class App extends React.Component { 

    render(){ 

     return (
      <Router history={hashHistory}> 
       <Route path='/' component={Index} > 
        <IndexRoute component={Register} /> 
        <Route path='/register' component={Register} /> 
       </Route> 
      </Router> 
     ); 
    } 
} 

입니다했다 구성 요소.

왜 <Register /> 구성 요소가 표시되지 않습니까? 링크를 클릭 할 때 레지스터 구성 요소를 렌더링하기 위해 무엇을 변경해야합니까?

Answer 1

내 인덱스 레이아웃에 {this.props.children}을 추가해야한다는 것을 깨달았습니다. 따라서 Link을 클릭하면 Register 레이아웃이 내 Index 레이아웃에로드됩니다.

다음 코드는 작동 만든 ...

render(){ 

    return (
     <div> 
     {this.props.children} <----- 
     <div className="sub-login"> 
      <p>{this.state.link}<Link to="/register"> Register here</Link></p> 
     </div> 
     </div> 

    );