Question

我有dva 2.0.1设置的反应式应用。在routers.js中，我有：

import React from 'react';
import { Router, Switch, Route, IndexRoute } from 'dva/router';
import IndexPage from './routes/IndexPage'
import CountPage from './routes/CountPage'

function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Route path="/" component={IndexPage}>
        <Switch>
          <Route path="/count" component={CountPage}/>
          <Route path="/statements" component={CountPage}/>
        </Switch>
      </Route>
    </Router>
  );
}

export default RouterConfig;

在我的IndexPage中，我有：

import React from 'react';
import { connect } from 'dva';
import styles from './IndexPage.css';
import { Layout } from 'antd'
import Header from '../components/Header'

const { Sider, Content, Footer } = Layout;

const IndexPage = (props) => {
  const { children, routes } = props;
  console.log(props);
  return (
    <Layout>
      <Header routes={routes}>header</Header>
      <Layout>
        <Sider>sider</Sider>
        <Content>{children || "No content"}</Content>
      </Layout>
    </Layout>
  );
}

IndexPage.propTypes = {
};

export default connect()(IndexPage);

但是，console.log(props);会提供dispach，history等，但children和routes不在其中。

发生了什么事？

Answer 1

您的Index组件上没有任何子组件。

如果你改变了这个

<Route path="/" component={IndexPage}>

到这个

<Route path="/" component={()=>(<IndexPage><p>This is a child component</p></IndexPage>)}>

您可以在Index组件中看到子组件。

Answer 2

我转而使用react-router@2语法，应该是react-router@4。

反应从路由器传递子元素

2 个答案: