반응 라우터를 사용하여 두 페이지 사이트 설정

Question

정말 간단한 두 페이지 레이아웃을 설정하려고합니다. 여기

내 주요 항목 페이지입니다 :

ReactDOM.render(
    <Router> 
     <Route path="/" component={HomeTheme} /> 
     <Route path="blog" component={BlogTheme} /> 
    </Router> 
     ,rootElement 
); 

나는 아래, 다른 레이아웃으로 각 경로를 렌더링하는 싶습니다 내가 가진

//Main Layout  
render() { 
    return (
     <div> 
      <Header /> 
      <MainNavigation /> 
      <AboutPage /> 
      <SkillsSection /> 
      <ExperienceSection /> 
      <Blog content={this.state.text} /> 
      <Footer /> 
     </div> 
    ); 
} 


//Blog Layout  
render() { 
    return (
     <div> 
      <BlogHeader /> 
      <MainNavigation /> 
      <Footer /> 
     </div> 
    ); 
} 

문제는 항상 디폴트 레이아웃입니다 HomeTheme, 어떻게 각 링크마다 다른 구성 요소를 사용할 수 있습니까?

Answer 1

모든 경로를 렌더링하려면 주 구성 요소 내에 {this.props.children}을 사용해야합니다.

<Route path="/" component={App}> 
    <IndexRoute component={HomePage}/> 
    <Route path="blog" component={Blog}/> 
    <Route path="registration" component={Registration} /> 
</Route> 

당신의 앱 내부의이 같은이 있어야합니다 :

class App extends Component { 
    render() { 
     return {this.props.children}; 
    } 
} 

그리고 인덱스 경로의 내부를,이 경우 홈페이지에서 당신이 탐색을 가져야한다

공유기는 다음과 같이해야한다 경로를 탐색 할 수 있습니다.

import { Link } from 'react-router'; 
class HomePage extends Component { 
    render() { 
    return (<ul> 
       <li><Link to="/">Home</Link></li> 
       <li><Link to="blog">Blog</Link></li> 
       <li><Link to="registration">Registration</Link></li> 
      </ul>) 
    } 
} 

희망이 있습니다.