CODEWITHSUNDEEP
reactjsreact-routerreact-hooksreact-router-domjss
Joseph
Joseph

Reputation: 7785

Conditional ClassName in Router in React

I have a router in my react app and i wanted to apply the classes.root on specific routes only. However the code below doesn't work since it is inside the <Switch>. As you can see in my code, that i wanted to apply the classes.root only on the Login and Signup. Pls check my code below:

function Routes() {
  const classes = useStyles();
  return (
    <Router>
      <Suspense fallback={<h3>Loading...</h3>}>
        <Switch>
          <Route path="/goto" component={GoTo} />
          <div className={classes.root}>
            <Route path="/signin" component={Login} />
            <Route path="/signup" component={Signup} />
          </div>
          <PrivateRoute path="/" component={Private} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default Routes;

Upvotes: 0

Views: 549

Answers (1)

Apostolos
Apostolos

Reputation: 10498

You need to change how Route is defined from using component property to using render property. I have not included passing the props to Login component, I just showed how you can use the classes.

If necessary, then you should use <Login {...props}/>

<Route path="/signin" component={Login} />

to this

   <Route path="/signin" render={props => {
     return (
      <div className={classes.root}>
        <Login/>
      </div>
    )
   }}
  />

Upvotes: 2

Related Questions