[英]Passing props in protected route reactjs
I'm using protected routes in my reactjs application and I would like to know how to pass props in a protected route or if there is a more elegant way to solve my problem.我在我的 reactjs 应用程序中使用受保护的路由,我想知道如何在受保护的路由中传递道具,或者是否有更优雅的方法来解决我的问题。
The reason why I feel the need to pass a props in a protected route, is that the logout button lies within the protected components and I need to communicate to the parent component, which contains all the routes, that the user is trying to log out.我觉得需要在受保护的路由中传递道具的原因是注销按钮位于受保护的组件内,我需要与包含所有路由的父组件进行通信,用户试图注销.
Here is the relevant code:这是相关的代码:
Parent component:父组件:
render() {
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={(props) => (
isAuthenticated === true
? <Component {...props} /*I tried inserting handleLogout={this.handleLogout} here */ />
: <Redirect to="/Login"/>
)} />
)
return (
<HashRouter basename={BASE_URL}>
<div className="stories-module">
<PrivateRoute
exact
path={'/login'}
component={Login}
/>
<PrivateRoute
exact
path={'/Main/'}
component={Main}
/>
</HashRouter>
)};
Unfortunately, I don't know how else I could resolve this issue.不幸的是,我不知道我还能如何解决这个问题。
Is it considered bad practice to pass props in a route component?在路由组件中传递 props 被认为是不好的做法吗? If so, how else can I handle this and if not, how do I pass the prop properly?如果是这样,我还能如何处理这个问题,如果不能,我该如何正确传递道具?
Declare your PrivateRoute
outside of the class :在类之外声明您的PrivateRoute
:
const PrivateRoute = ({ component: Component, handleLogout, isAuthenticated, ...rest }) => (
<Route {...rest} render={(props) => (
isAuthenticated === true
? <Component {...props} handleLogout={handleLogout} />
: <Redirect to="/Login"/>
)} />
);
Then pass handleLogout
to your PrivateRoute
props :然后将handleLogout
传递给您的PrivateRoute
道具:
render() {
return (
<HashRouter basename={BASE_URL}>
<div className="stories-module">
<Route
exact
path={'/login'}
component={Login}
/>
<PrivateRoute
exact
path={'/Main/'}
component={Main}
handleLogout={this.handleLogout}
isAuthenticated={isAuthenticated}
/>
</div>
</HashRouter>
)
};
You may want to declare you PrivateRoute
like below in order to pass any prop to the component by spreading all props :你可能PrivateRoute
下面这样声明你的PrivateRoute
,以便通过传播所有 props 将任何 props 传递给组件:
const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (
<Route {...rest} render={(props) => (
isAuthenticated === true
? <Component {...props} {...rest} />
: <Redirect to="/Login"/>
)} />
);
Here is a more general solution to pass as many props to the component as you want:这是一个更通用的解决方案,可以根据需要将尽可能多的 props 传递给组件:
render() {
const PrivateRoute = ({ component: Component, data, ...rest }) => (
<Route {...rest} render={(props) => (
isAuthenticated === true
? <Component {...props} {...data} />
: <Redirect to="/Login"/>
)} />
);
return (
<HashRouter basename={BASE_URL}>
<PrivateRoute
exact
path={'/login'}
component={Login}
data={{
handleLogout=this.handleLogout,
...
someProp=this.prop
}}
/>
<PrivateRoute
exact
path={'/Main/'}
component={Main}
data={{
handleLogout=this.handleLogout,
...
someProp=this.prop
}}
/>
</HashRouter>
);
}
Add an extra prop to your PrivateRoute
HOC为您的PrivateRoute
HOC 添加额外的道具
render() {
const PrivateRoute = ({ component: Component, handleLogout, ...rest }) => (
<Route {...rest} render={(props) => (
isAuthenticated === true
? <Component handleLogout={handleLogout} {...props} />
: <Redirect to="/Login"/>
)} />
);
return (
<HashRouter basename={BASE_URL}>
<PrivateRoute
exact
path={'/login'}
component={Login}
handleLogout={this.handleLogout}
/>
<PrivateRoute
exact
path={'/Main/'}
component={Main}
handleLogout={this.handleLogout}
/>
</HashRouter>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.