Question

React-Router noob，尝试通过简单的构建找到方法。请耐心等待。

我有一个包含三个组件的应用：标题，侧边栏和索引。

在浏览器中，标题和侧边栏正确呈现，但索引组件没有，我不知道为什么。控制台正在抛出此警告：

Warning: You should not use <Route component> and <Route children> in the same route; 
<Route children> will be ignored

这只是一个警告，但它告诉我它忽略了孩子而我认为这就是它破裂的地方。然后，我又知道什么？我是这一切的新手。

这是我的根组件。

import React, { Component } from 'react';
import { Router, Route, IndexRoute } from 'react-router';
import Index from './components/Index';

import App from './components/App';

class Root extends Component {
  render() {
    return (
      <Router history={this.props.history}>
        <Route path='/' component={App}>
          <IndexRoute component={Index}/>
        </Route>
      </Router>
    );
  }
}

export default Root;

这是索引组件

import React, { Component } from 'react';

class IndexComponent extends Component {

  constructor() {
    super();
  }
  render() {
    return (
      <h2>Click on a contact to view their profile</h2>
    );
  }
}

export default IndexComponent;

...和我的app组件（其中this.props.children返回undefined）

import 'normalize.css/normalize.css';
import 'bootstrap/dist/css/bootstrap.min.css';

import React, { Component } from 'react';
import Header from './Header';
import Sidebar from './Sidebar';
import { Grid, Row, Col } from 'react-bootstrap';

class AppComponent extends Component {

  componentWillMount() {
    this.lock = new Auth0Lock('XXXXXXXXXXXX', 'XXXXXX.auth0.com');
  }

  render() {
    return (
      <div>
        <Header lock={this.lock}></Header>
        <Grid>
          <Row>
            <Col xs={12} md={3}>
              <Sidebar />
            </Col>
            <Col xs={12} md={9}>
              {this.props.children}
            </Col>
          </Row>
        </Grid>

      </div>
    );
  }
}

export default AppComponent;

Answer 1

上面的Pardeep Dhingra指出，我试图使用弃用的React Router组件。在子组件中嵌套路由是现在的方法。

而不是以这种方式构建我的根组件

import React, { Component } from 'react';
import { Router, Route, IndexRoute } from 'react-router';
import Index from './components/Index';

import App from './components/App';

class Root extends Component {
  render() {
    return (
      <Router history={this.props.history}>
        <Route path='/' component={App}>
          <IndexRoute component={Index}/>
        </Route>
      </Router>
    );
  }
}

export default Root;

我应该这样做：

//Root.js

import React, { Component } from 'react';
import { Router, Route } from 'react-router';
import App from './components/App';

class Root extends Component {
  render() {
    return (
      <Router history={this.props.history}>
        <Route path='/' component={App} />
      </Router>
    );
  }
}

export default Root;

用我的应用程序组件替换this.props.children

//App.js

import 'normalize.css/normalize.css';
import 'bootstrap/dist/css/bootstrap.min.css';

import React, { Component } from 'react';
import { Route } from 'react-router';
import Header from './Header';
import Sidebar from './Sidebar';
import Index from './Index';
import { Grid, Row, Col } from 'react-bootstrap';

class AppComponent extends Component {

   componentWillMount() {
    this.lock = new Auth0Lock('XXXXXXXXXXXX', 'XXXXXX.auth0.com');
  }

  render() {
    return (
      <div>
        <Header lock={this.lock}></Header>
        <Grid>
          <Row>
            <Col xs={12} md={3}>
              <Sidebar />
            </Col>
            <Col xs={12} md={9}>
              <Route path="/" component={ Index } />
            </Col>
          </Row>
        </Grid>

      </div>
    );
  }
}

export default AppComponent;

路由儿童被忽略

1 个答案: