Блог

Я пытаюсь настроить действительно простой двухстраничный макет.

Вот моя главная страница входа:

 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 имеет значение, как я могу использовать разные компоненты для каждой ссылки?

Вам необходимо использовать {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>)
  }
}
  

Надеюсь, это поможет.