用{this.props.children}路由渲染不出组件

Question

  <Route path="/" component={App} />
  <Route exact path="/" component={Home} />
  <Route path="topics" component={Topics} />
  <Route path="/topics/:id" component={Topic} />

<ul className='menu' data-flex="box:mean">
                    <li> 
                        <NavLink to='home'>
                            <i className="iconfont icon-shouye"></i>首页
                        </NavLink>
                    </li>
                    <li>
                        <NavLink to='topic/create'>
                             <i className="iconfont icon-fabu"></i>发表
                        </NavLink>
                    </li>
                    <li>
                        <NavLink to='my/message'>
                             <i className="iconfont icon-xiaoxi"></i>消息
                        </NavLink>
                    </li>
                    <li>
                        <NavLink to={`/user/${user.id}`}>
                             <i className="iconfont icon-wode"></i>我的
                        </NavLink>
                    </li> 
                </ul>

class App extends Component{
  render() {
    return (
      <div>      
        {this.props.children}
        <Footer/>
      </div>
    )
  }
}

用{this.props.children}渲染不出组件,用的是react-router-dom.

Answer 1

class App extends Component{
  render() {
    return (
      <div>      
        {this.props.children}
        <Footer/>
      </div>
    )
  }
}

中的 this.props.children
"代表"的是 使用<APP>XXXXXX</APP> 时 APP标签中的 XXXXXX 这部分内容(子标签s)