Javascript 反应没有出现的成分

我现在有回购协议

我有显示链接的主页，当你点击链接时，路由器工作。但是组件的文本没有显示出来，比如

登录页面

，

主页

，等等

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'));

从“React”导入React；
从“react dom”导入react dom；
从“react Router”导入{Router，Route，Link，IndexRoute，browserHistory}；
从'react redux'导入{Provider}；
从“redux”导入{createStore，applyMiddleware}；
从“./reducers”导入减速机；
从“./Nav”导入Nav；
从“./components/Home”导入Home；
从“./components/Login”导入登录名；
从“./components/SignupMain”导入SignupMain；
const createStoreWithMiddleware=applyMiddleware（）（createStore）；
ReactDOM.render(
(
)，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;

从“React”导入React；
从“反应路由器”导入{Link}；
导出默认类Nav.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(

家
登录
报名

)
}
}
//默认导出Nav；

组件/Home.js：

import React, { Component } from 'react';

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

import React，{Component}来自'React'；
导出默认类Home extends组件{
render（）{
返回(
主页
);
}
}

---

为什么这些组件没有显示在页面上？

由于您的其他路由嵌套在“Nav”组件的路由中，它应该在某个地方呈现其子级。为此，您必须将

this.props.children

放在您希望在Nav组件的JSX中呈现嵌套组件的位置

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

导出默认类Nav.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(

家
登录
报名

{this.props.children}
)
}
}

由于您的其他路由嵌套在“导航”组件的路由中，因此它应该在某个地方呈现其子路由。为此，您必须将

this.props.children

放在您希望在Nav组件的JSX中呈现嵌套组件的位置

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

导出默认类Nav.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(

家
登录
报名

{this.props.children}
)
}
}

您的路由器版本是什么？您的代码不可访问。把它放进一些公共回购，比如github，然后分享。你的react路由器版本是什么？您的代码不可访问。正确的，我确实在我们的

Nav

组件的底部看到了这一条款，但我不知道它是什么意思。感谢tharakacorrect，我现在确实在

Nav

组件的底部看到了该条款，但我不知道它是什么意思。谢谢塔拉卡