反应组件没有出现

Question

我在https://bitbucket.org/codyc54321/anthony-project-react有一个仓库

我的主页显示了链接，当您单击链接时，反应路由器就可以工作。但组件的文本没有显示，如 <div>Login page</div>、<div>Homepage</div>等。

索引.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'));

导航.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”组件的路线内，因此它应该在某处呈现其子级。为此，您必须将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>
        )
    }
}