Passing props in protected route reactjs

Question

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?

What you are trying should work but you may move your PrivateRoute declaration outside of the class scope. — Dyo
– Dyo, Commented Mar 1, 2018 at 9:29

Dyo · Accepted Answer · 2018-03-02 08:49:13Z

13

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"/>
        )} />
);

edited Mar 2, 2018 at 8:49

answered Mar 1, 2018 at 9:43

Dyo

4,4641 gold badge18 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dyo Over a year ago

@A.S.J You're welcome, just one question, is your login route intended to be private ?

A.S.J Over a year ago

No, the login should be public. Why are you asking?

Dyo Over a year ago

Because it's declared as a PrivateRoute in the code so you should'nt have access to it on logout.

A.S.J Over a year ago

Oh yeah that's not my actual code, that was a silly mistake. In my app it's public, not sure what I was thinking

robert · Accepted Answer · 2019-09-24 07:37:52Z

4

Here is a more general solution to pass as many props to the component as you want:

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>
  );
}

answered Sep 24, 2019 at 7:37

robert

3,7863 gold badges43 silver badges66 bronze badges

1 Comment

MattS Over a year ago

The above failed for me until I changed handleLogout=this.handleLogout to handleLogout:this.handleLogout

Gabriel Bleu · Accepted Answer · 2018-03-01 09:44:45Z

2

Add an extra prop to your 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>
  );
}

answered Mar 1, 2018 at 9:44

Gabriel Bleu

10.3k2 gold badges33 silver badges45 bronze badges

Collectives™ on Stack Overflow

Passing props in protected route reactjs

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related