React 路由器中的条件类名

Question

我的 React 应用程序中有一个路由器，我只想在特定路由上应用 classes.root。但是下面的代码不起作用，因为它在 <Switch> 内。正如您在我的代码中看到的，我只想在 Login 和 Signup 上应用 classes.root。请检查我的代码：

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;

Answer 1

您需要将 Route 的定义方式从使用 component 属性更改为使用 render 属性。我没有包括将道具传递给 Login 组件，我只是展示了如何使用 classes.

如果有必要，那么你应该使用<Login {...props}/>

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

至此

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

React 路由器中的条件类名

Conditional ClassName in Router in React

reactjs

react-router

react-router-dom

jss

react-hooks