在我的React JS项目中,我正在研究PrivateRoutes
。
我已经看过这个使用react-router-dom
进行私有路由和身份验证的示例。
https://reacttraining.com/react-router/web/example/auth-workflow
根据本文档,他们已经创建了PrivateRoute
作为无状态组件。
但是我需要将其转换为有状态的React组件,因为我想将PrivateRoute
组件连接到redux存储。
这是我的代码。
无状态组件
import React from 'react';
import {Route, Redirect} from 'react-router-dom';
import {auth} from './Authentication';
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route
{...rest}
render={props =>
auth.isAuthenticated ? (
<Component {...props} />
) : (
<Component {...props} action="login"/>
)
}
/>
);
export default PrivateRoute;
我将此组件转换为有状态的React
组件。
有状态的React组件
import React from 'react';
import {Route, Redirect} from 'react-router-dom';
import {auth} from './Authentication';
import {connect} from 'react-redux';
class PrivateRoute extends React.Component {
render({ component: Component, ...rest }) {
return (
<Route
{...rest}
render={props =>
this.props.customer.isAuthenticated ? (
<Component {...props} />
) : (
<Component {...props} action="login"/>
)
}
/>
);
}
}
export default connect(state => state)(PrivateRoute);
在这里,我正在从redux存储中读取数据,以检查用户是否已通过身份验证。
但是我将无状态组件转换为有状态的方法是不正确的。
我可以正确传递参数render({ component: Component, ...rest })
吗?
将PrivateRoute
与redux store连接会导致props
出现任何问题,因为state=>state
会将state
映射到props
以及...rest
将有props
个对象?
不确定代码中发生了什么。
更新 AppRouter.js
import React from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import {TransitionGroup, CSSTransition} from 'react-transition-group';
import PrivateRoute from './PrivateRoute';
import HomePage from './../components/HomePage';
import AboutUs from './../components/AboutUs';
import ContactUs from './../components/ContactUs';
import PageNotFound from './../components/PageNotFound';
import RestaurantList from '../components/RestaurantList';
import RestaurantMenu from '../components/RestaurantMenu';
import UserDetails from '../components/UserDetails';
import OrderConfirmation from '../components/OrderConfirmation';
import CustomerAccount from '../components/CustomerAccount';
import Logout from '../components/sections/Logout';
export default () => {
return (
<BrowserRouter>
<Route render={({location}) => (
<TransitionGroup>
<CSSTransition key={location.key} timeout={300} classNames="fade">
<Switch location={location}>
<Route path="/" component={HomePage} exact={true}/>
<Route path="/about" component={AboutUs} />
<Route path="/contact" component={ContactUs} />
<Route path="/restaurants" component={RestaurantList} />
<Route path="/select-menu" component={RestaurantMenu} />
<PrivateRoute path="/user-details" component={UserDetails} />
<PrivateRoute path="/order-confirmation" component={OrderConfirmation} />
<PrivateRoute path="/my-account" component={CustomerAccount} />
<PrivateRoute path="/logout" component={Logout} />
<Route component={PageNotFound} />
</Switch>
</CSSTransition>
</TransitionGroup>
)} />
</BrowserRouter>
);
}
答案 0 :(得分:6)
通常,将无状态功能组件(SFC)转换为Component
是这样的:
为其创建class
shell。
将SFC的主体复制到render
方法中。如果SFC是箭头功能,则根据需要向return
添加render
。
将props
方法中对render
的所有引用更改为this.props
(或仅在顶部添加const { props } = this;
)。 SFC在其参数中接收其道具,但是组件将其作为其构造函数的参数接收;默认构造函数会将其另存为this.props
。
在您的情况下,它在其参数上使用了解构,因此您可以对解构右侧的this.props
进行同样的操作:
const { component: Component, ...rest } = this.props;
就是这样。在您的代码中,您已经向render
函数添加了参数,但是没有任何参数调用它,并且您只是随意地将props
更改为this.props
(包括出于某种原因将auth.isAuthenticated
更改为this.props.customer.isAuthenticated
。
因此应用上述1-3:
// #1 - the shell
class PrivateRoute extends React.Component {
// #2 - `render`, with the body of the SFC inside
render() {
// #3 - destructure `this.props`
const { component: Component, ...rest } = this.props;
// #2 (part 2) - add `return`
return <Route
{...rest}
render={props =>
auth.isAuthenticated ? (
<Component {...props} />
) : (
<Component {...props} action="login"/>
)
}
/>;
}
}
答案 1 :(得分:1)
您的有状态组件应为:
class PrivateRoute extends React.Component {
render() {
const { component: Component, ...rest } = this.props;
return (
<Route
{...rest}
render={props =>
this.props.customer.isAuthenticated ? (
<Component {...props} />
) : (
<Component {...props} action="login"/>
)
}
/>
);
}
}
请注意,render
的{{1}}参数中存在一些问题。在这里,您将Route
作为函数参数,但仍在使用props
,不知道用例,因此请根据您的应用程序对其进行修复。
除this.props.customer
以外,组件的props中已经存在所有其他数据。在组件中的Component
方法的参数中将不可用。如上代码所示,可以使用render
方法编写与无状态组件中可用的相同的破坏操作。
将PrivateRoute与redux商店连接会导致道具出现问题吗?
是的,会的。您与商店的连接方式将使商店数据在组件的render
中可用,但传递给组件的外部props
将不可用。
为此,您必须在props
函数中进行处理:
mapStateToProps
此处const mapStateToProps = (state, ownProps) => ({
...state,
...ownProps
});
具有第二个参数,该参数具有传递给组件的外部自己的道具。因此,您还必须返回它以使其在组件mapStateToProps
中可用。
现在连接将是:
props
答案 2 :(得分:0)
我有两个查询。
1)如何转换为有状态功能组件? 2)连接到Redux商店后,道具会出现问题吗?
我的第一个查询已由T.J.Crowder
提供的答案解决。
对于第二个查询,我尝试将redux store
连接到PrivateRoute
,并且确实获得了我想要的数据。
这是对我有用的代码。
import React from 'react';
import {Route, Redirect} from 'react-router-dom';
import {connect} from 'react-redux';
class PrivateRoute extends React.Component {
render() {
const { component: Component, ...rest } = this.props;
const {customer} = this.props;
return <Route
{...rest}
render={props =>
customer.isAuthenticated ? (
<Component {...props} />
) : (
<Component {...props} action="login"/>
)
}
/>;
}
}
export default connect(state => state)(PrivateRoute);
使用此代码,我获得了来自路线的数据以及道具内部的redux状态。
这是从路线获取数据
const { component: Component, ...rest } = this.props;
这是来自redux存储的数据。
const {customer} = this.props;
答案 3 :(得分:0)
@ T.J。Crowder已经在这三个步骤中编写了如何将无状态组件转换为有状态组件。因此,我将像您一样撰写有关将组件连接到redux存储的文章。
我认为连接的组件应始终定义mapStateToProps
并明确声明其依赖于状态的数据。
因为如果已连接的属性发生更改,则已连接的组件将重新渲染。因此将整个应用程序状态连接到组件将是一个坏主意。因为这意味着只要应用程序状态发生任何变化,都将重新呈现所有连接的组件。
最好像下面这样明确定义,我们依赖于状态中名为data
(或您拥有的任何东西)的属性。因此,在这种情况下,仅当state.data
更改时,该组件才会重新呈现;如果state.xyz
更改,则不会重新呈现。
通过这种方式,您可以获取state.data并根据需要命名它,以免与该组件的任何现有属性冲突。
const mapStateToProps = (state, ownProps) => ({
data: state.data
});
export default connect(mapStateToProps)(PrivateRoute);