Я пытался реализовать аутентифицированные маршруты, но обнаружил, что 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 {
render() {
if (!this.props.isLoggedIn) {
this.props.redirectToLogin()
return null
}
return <Route {...this.props} />
}
}
AuthenticatedRoute.propTypes = {
isLoggedIn: PropTypes.bool.isRequired,
component: PropTypes.element,
redirectToLogin: PropTypes.func.isRequired
}
Isit правильно отправить действие в render(), он чувствует себя не так. Это действительно не кажется правильным с помощью componentDidMount или какого-либо другого крючка?
