React Router v4：组件和子代处于同一路径

Question

我是React的初学者，并且已经升级了基础项目以响应Router v4。该应用程序似乎运行正常，但是我始终收到以下警告：

警告：您不应在同一路径中使用<Route component>和<Route children>；<路由子代>将被忽略

这是我的应用程序（为了便于阅读，省略了一些导入）：

index.js

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}>
        <BrowserRouter>{routes}</BrowserRouter>
    </Provider>
    , document.getElementById('root')
);

route.js：

import {
  BrowserRouter as Router,
  Route,
  Switch,
  Link
} from 'react-router-dom';


export default (
    <Main>
      <Route path="/topics/create" component={CreateTopicView}> </Route>
      <Route path="/topics/search" component={SearchTopicsView}> </Route>
      <Route path="/topics/manage" component={ManageTopicsView}> </Route>
      <Route path="/moderation/pre" component={ModerationPreView}> </Route>
      <Route path="/moderation/post" component={ModerationPostView}></Route>
      <Route path="/dashboard" component={DashboardView}> </Route>
      <Route exact={true} path="/" component={DashboardView}> </Route>
    </Main>
);

main.js：

import PropTypes from 'prop-types'
import { withRouter } from 'react-router'


class Main extends React.Component {
    static propTypes = {
        match: PropTypes.object.isRequired,
        location: PropTypes.object.isRequired,
        history: PropTypes.object.isRequired
      }

    render() {
        let wrapperClass = "gray-bg " + this.props.location.pathname;
        return (
            <div id="wrapper">
                <Progress />
                <Navigation location={this.props.location}/>

                <div id="page-wrapper" className={wrapperClass}>

                    <TopHeader />

                    {this.props.children}

                    <Footer />

                </div>

            </div>

        )
    }
}


export default withRouter(Main)

这个想法是，应该始终加载组件中的大多数组件Main（例如Navbar），还Navbar需要知道当前路径，以便它可以显示当前选择。

然后，应根据路径显示TopHeader和Footer变量之间的内容。

我在做什么错了，我怎么能解决有关警告Route Component，并Route Children在相同的路径？

Answer 1

正如Shubham Khatri在评论中提到的那样，该警告是由我在路线开始标记后的空格引起的：

那是因为您的路线之间有空间。表现为子级且在v4中的路由不假定有子级<Route path =“ / topics / create” component = {CreateTopicView}> {/ *您在此处有空格* /} </ Route>

将路线定义更改为

<Route path="/topics/create" component={CreateTopicView}></Route>

要么

<Route path="/topics/create" component={CreateTopicView} />

修正警告