Блог

У меня есть маршрутизатор в моем приложении react, и я хотел применить classes.root его только к определенным маршрутам. Однако приведенный ниже код не работает, поскольку он находится внутри <Switch> . Как вы можете видеть в моем коде, я хотел применить classes.root только к Login and Signup . Пожалуйста, проверьте мой код ниже:

 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;
  

Вам нужно изменить способ Route определения с using component property на using render property . Я не включил передачу реквизитов Login компоненту, я просто показал, как вы можете использовать classes .

При необходимости вам следует использовать <Login {...props}/>

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

для этого

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