реквизиты, которые возвращают исходный компонент, если аутентификация не требуется или уже аутентифицирована, в противном случае возвращают компонент по умолчанию, например Авторизоваться.
ался реализовать аутентифицированные маршруты, но обнаружил, что 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) документы, это предполагает что-то вроде
<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>
Но возможно ли достичь этого, группируя вместе несколько маршрутов?
ОБНОВИТЬ
Хорошо, после некоторого исследования я придумал это:
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
}
Правильно ли отправлять действие вrender()
это неправильно Это не кажется правильным сcomponentDidMount
или какой-то другой крючок?