How to pass props to Route component?

Question

I have the code below. I need to send props to Dashboard component.

<Router>
  <Switch>
    <RouteGuard
      exact
      path="/"
      component={Dashboard}
    />
    <Route
      path="/login"
      component={LoginPage}
    />
    <Redirect to="/" />
  </Switch>
</Router>

What I want to do is something like the code below.

<Route path="/dashboard">
  <Dashboard isActive={isActive} handleClick={handleClick} />
</Route>

The code for my RouteGuard component is below.

const RouteGuard = ({ component: Component, ...rest }) => {
  function hasJWT() {
    let flag = false;
 
    //check user has JWT token
    localStorage.getItem("token") ? flag=true : flag=false
    return flag
  }
 
  return (
    <Route
      {...rest}
      render={props => (
        hasJWT()
          ? <Component {...props} />
          : <Redirect to={{ pathname: '/login' }} />
      )}
    />
  );
};

You already have an example in your code) Just use render prop on your route — Alopwer, Aug 22 '22 at 10:38

score 0 · Accepted Answer · answered Aug 22 '22 at 10:51

0

The solution is already in your code, the props may vary a little bit, depending on your requirements

<Route 
  path="/dashboard" 
  render={props => <Dashboard isActive={isActive} handleClick={handleClick} {...props} />} />

answered Aug 22 '22 at 10:51

Alopwer

611
8
22

Yeah, I tried like that but it gives me " Element type is invalid: expected a string..." this error. RouteGuard component does not receive component this way. – Damla Kara Aug 22 '22 at 11:23
@DamlaKara, check out this answer https://stackoverflow.com/questions/52305729/react-js-route-element-type-is-invalid – Alopwer Aug 22 '22 at 11:25

How to pass props to Route component?

1 Answers1