Question

我是一名反应初学者，并已升级基础项目以对路由器v4做出反应。该应用似乎工作正常，但我总是收到以下警告：

警告：您不应使用＆lt;路线组件＆gt;和＆lt;路线儿童＆gt;在同一条路线上; ＆lt;路线儿童＆gt;将被忽略

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

index.js

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

routes.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中的孩子和路线不应该有孩子＆lt; Route path =“/ topics / create”component = {CreateTopicView}＆gt; {/ *你有空间这里* /}＆lt; / Route＆gt;

将路线定义更改为

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

或

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

修正了警告

React Router v4：组件和子项在同一路由中

1 个答案: