全栈开发React-私有路由
Posted guangzhou11
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了全栈开发React-私有路由相关的知识，希望对你有一定的参考价值。
demo
import React from ‘react‘;
import {Route,Redirect} from ‘react-router-dom‘
import {connect} from ‘react-redux‘
import { PropTypes } from ‘prop-types‘
const PrivateRoute = ({ component: Component, auth,...rest }) => (
<Route
{...rest}
render={
(props) =>
(auth.isAuthenticated === true
? <Component {...props} />
: <Redirect to=‘/login‘ />
)} />
)
PrivateRoute.propTypes = {
auth: PropTypes.object.isRequired
}
const mapStateToProps = state => ({
auth: state.auth,
})
export default connect(mapStateToProps)(PrivateRoute);
据用户的auth状态，我们将渲染Redirect或渲染组件
以下是我们PrivateRoute组件的要求。
- 它与<Route />具有相同的API。
- 它呈现<Route />并将所有道具传递给它。
- 它检查用户是否经过身份验证，如果是，则呈现“组件”道具。如果没有，它会将用户重定向到/ login。
以上是关于全栈开发React-私有路由的主要内容，如果未能解决你的问题，请参考以下文章
如何使用嵌套路由和私有路由组件在 react.js 中正确构建路由？
使用具有不同片段字段的相同中继根查询的多个 react-router-relay 路由