反应成分未出现

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