陣營路由器 - 鏈接不正確引導

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> 

    );