可以在特定路由器链接的负载下使用反应状态来扩展应用栏的高度吗？

Question

我目前已在React路由器和两个“页面”组件中设置了一个应用程序。我还具有一个导出到app.js文件中的应用程序栏，因此无论在路由器中呈现什么页面，该应用程序栏对于每个页面都是一致的。应用程序栏的高度为70px，但我想使其变为homepx.js组件时的高度为128px，如果用户单击返回另一页，应用程序栏的高度将返回70px。

app.js代码：

function App () {
  return (
    <Router>
     <ThemeProvider theme={theme}>
      <CssBaseline/>
      <AppBar>
       <PageLink to="/about" name="About"/>
       </Appbar>
       <Switch>
        <Router exact path="/">
         <Home/>
        </Route>
       <Route path="/about">
        <About/>
      </Route>
    </Switch>
      </ThemeProvider>
    </Router>
  );
}

这是应用程序条码（并非所有样式都具有，但是它确实包括两个定义的高度，如下所示）：

const useStyles = makeStyles((theme) => ({
standard: {
height: 72,
},
extended: {
height: 128,
},
})),

<MUIAppBar
id={id}
className={clsz(classes.container, classes[variant])}
position={position}
elevation={0}
style={style}
>

<Toolbar className={classes.toolbar} variant="dense">
<Link className={classes.title} to="/"></Link>
</Toolbar>
</MUIAppBar>
);
};

AppBar.defaulProps = {
id: "app-bar"
children: null,
style: {}
position: "static"
variant:"standard"
};

AppBar.propTypes = {
id: PropTypes.string,
children: PropTypes.node,
style: PropTypes.objectOf(PropTypes.any),
position: PropTypes.oneOf([
"fixed",
"absolute",
"sticky",
"static",
"relative",
]),
variant: PropTypes.oneOf(["standard", "extended])
};

[在完成这两个版本的定义后，我不认为接下来要做什么来呈现扩展的变体，如上面的代码所示，这将是一种状态语法，并将其放置在app.js中以呈现首页的“ /”路径？

Answer 1

一种可能是肮脏的快速解决方案是将AppBar组件包装在Switch路由器中，如下所示：

const AppBarRouter = () => {
  // Define all routes that need extended bar
  const extendedRoutes = [
    '/',
    'another-extended-route',
  ];
  return (
    <Switch>
      // Render all extended routes
      {extendedRoutes.map(path => {
        return <Route path={path} key={path} component={() => <AppBar extended />}
      })
      // The rest are not extended
      <Route component={AppBar}
    <Switch>
  )
}

然后您可以在AppBarRouter组件中渲染App。

然后，如果需要用于不同路线的不同导航链接，则可以扩展此逻辑以用于自定义工具栏组件。