阵营路由器 - 链接不正确引导

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 />的另一个类中。

然后，我有以下途径...

class App extends React.Component { 

    render(){ 

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

当点击Link，网址更改为/register，但页面的内容仍然是主页，这是<Index />的零件。

为什么不显示<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> 

    );