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};
    }
}

在索引路线内，在这种情况下，HomePage你应该有一个导航来在路线之间导航。

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>)
  }
}

希望这有帮助。

使用react-router设置两个页面站点

1 个答案: