在受保护的路由 reactjs 中传递道具 [英] Passing props in protected route reactjs

问题描述

我在我的 reactjs 应用程序中使用了受保护的路由，我想知道如何在受保护的路由中传递道具，或者是否有更优雅的方法来解决我的问题.

我觉得需要在受保护的路由中传递道具的原因是注销按钮位于受保护的组件内，我需要与包含用户正在尝试的所有路由的父组件进行通信退出.

相关代码如下:

父组件:

render() {const PrivateRoute = ({ component: Component, ...rest }) =>(<Route {...rest} render={(props) =>(isAuthenticated === true?<Component {...props}/*我尝试在这里插入 handleLogout={this.handleLogout} *//>:<重定向到=/登录"/>)}/>)返回 (<HashRouter basename={BASE_URL}><div className="故事模块"><私人路线精确的路径={'/登录'}组件={登录}/><私人路线精确的路径={'/主/'}组件={主}/></HashRouter>)};

不幸的是，我不知道我还能如何解决这个问题.

在路由组件中传递 props 被认为是不好的做法吗?如果是这样，我还能如何处理这个问题，如果不能，我该如何正确传递道具?

解决方案

在课堂外声明你的 PrivateRoute :

const PrivateRoute = ({ component: Component, handleLogout, isAuthenticated, ...rest }) =>(<Route {...rest} render={(props) =>(isAuthenticated === true?<组件{...props} handleLogout={handleLogout}/>:<重定向到=/登录"/>)}/>);

然后将 handleLogout 传递给您的 PrivateRoute 道具:

render() {返回 (<HashRouter basename={BASE_URL}><div className="故事模块"><路线精确的路径={'/登录'}组件={登录}/><私人路线精确的路径={'/主/'}组件={主}handleLogout={this.handleLogout}isAuthenticated={isAuthenticated}/>

</HashRouter>)};

您可能想像下面这样声明您的 PrivateRoute，以便通过传播所有道具将任何道具传递给组件:

const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) =>(<Route {...rest} render={(props) =>(isAuthenticated === true?<组件 {...props} {...rest}/>:<重定向到=/登录"/>)}/>);

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.

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? 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 :

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 :

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 :

const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (
        <Route {...rest} render={(props) => (
            isAuthenticated === true
            ? <Component {...props} {...rest} />
            : <Redirect to="/Login"/>
        )} />
);

这篇关于在受保护的路由 reactjs 中传递道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！