反應成分未出現

Question

我在https://bitbucket.org/codyc54321/anthony-project-react

回購我有一個展示的鏈接網頁，當你點擊的鏈接反應路由器的作品。但是組件的文本沒有顯示出來，如<div>Login page</div>，<div>Homepage</div>等

index.js：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Router, Route, Link, IndexRoute, browserHistory } from 'react-router'; 
import { Provider } from 'react-redux'; 
import { createStore, applyMiddleware } from 'redux'; 

import reducers from './reducers'; 

import Nav from './Nav'; 
import Home from './components/Home'; 
import Login from './components/Login'; 
import SignupMain from './components/SignupMain'; 


const createStoreWithMiddleware = applyMiddleware()(createStore); 

ReactDOM.render(
    (
     <Provider store={createStoreWithMiddleware(reducers)}> 
      <Router history={browserHistory}> 
       <Route path="/" component={Nav}> 
        <IndexRoute component={Home}/> 
        <Route path='/login' component={Login}/> 
        <Route path='/signup-main' component={SignupMain}/> 
       </Route> 
      </Router> 
     </Provider> 
), document.querySelector('.container')); 

Nav.js：

import React from 'react'; 
import { Link } from 'react-router'; 

export default class Nav extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (
      <div> 
       <nav className="navbar navbar-default"> 
        <div className="container-fluid"> 
         <div className="navbar-header navbar-brand"> 
          <a href="/">Home</a> 
         </div> 
        </div> 
        <div id="navbar" className="navbar-right"> 
         <ul className="nav navbar-nav"> 
          <li><Link activeClassName="active" to="/" onlyActiveOnIndex>Home</Link></li> 
          <li><Link activeClassName="active" to="/login" onlyActiveOnIndex>Login</Link></li> 
          <li><Link activeClassName="active" to="/signup-main" onlyActiveOnIndex>Signup</Link></li> 
         </ul> 
        </div> 
       </nav> 
      </div> 
     ) 
    } 
} 


// export Nav as default; 

組件/ Home.js：

import React, { Component } from 'react'; 

export default class Home extends Component { 
    render() { 
    return (
     <div>Homepage</div> 
    ); 
    } 
} 

爲什麼這些組件不顯示在頁面上？謝謝

Answer 1

由於您的其他路由嵌套在'Nav'組件的路由中，因此應該將其子節點呈現在某處。對於這一點，你必須把要呈現導航組件的JSX嵌套組件this.props.children。

export default class Nav extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (
      <div> 
       <nav className="navbar navbar-default"> 
        <div className="container-fluid"> 
         <div className="navbar-header navbar-brand"> 
          <a href="/">Home</a> 
         </div> 
        </div> 
        <div id="navbar" className="navbar-right"> 
         <ul className="nav navbar-nav"> 
          <li><Link activeClassName="active" to="/" onlyActiveOnIndex>Home</Link></li> 
          <li><Link activeClassName="active" to="/login" onlyActiveOnIndex>Login</Link></li> 
          <li><Link activeClassName="active" to="/signup-main" onlyActiveOnIndex>Signup</Link></li> 
         </ul> 
        </div> 
       </nav> 
       <div>{this.props.children}</div> 
      </div> 
     ) 
    } 
}