相关疑难解决方法(0)

我试图实现经过身份验证的路由,但发现React Router 4现在阻止了它的工作:

<Route exact path="/" component={Index} />
<Route path="/auth" component={UnauthenticatedWrapper}>
    <Route path="/auth/login" component={LoginBotBot} />
</Route>
<Route path="/domains" component={AuthenticatedWrapper}>
    <Route exact path="/domains" component={DomainsIndex} />
</Route>

错误是:

警告:您不应该使用<Route component>和使用<Route children>相同的路线; <Route children>将被忽略

在这种情况下,有什么正确的方法来实现这个？

它出现在react-router(v4)docs中,它表明了类似的东西

<Router>
    <div>
    <AuthButton/>
    <ul>
        <li><Link to="/public">Public Page</Link></li>
        <li><Link to="/protected">Protected Page</Link></li>
    </ul>
    <Route path="/public" component={Public}/>
    <Route path="/login" component={Login}/>
    <PrivateRoute path="/protected" component={Protected}/>
    </div>
</Router>

但是,将一堆路线组合在一起是否有可能实现这一目标？

UPDATE

好的,经过一些研究,我想出了这个:

import React, {PropTypes} from "react"
import {Route} from "react-router-dom"

export default class AuthenticatedRoute extends React.Component …