javascript - 如何在反应中将导航栏设置为对背景图像透明

Question

我有一个项目，我使用图层组件来显示导航栏组件和主组件，并将其用作应用程序路线的布局。问题是如何向具有不同主背景图像的每条路线显示透明导航。?

function App() {
  return (
    <Layer>
      <Switch>
        <Route path="/home" exact>
          <Main />
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/projects">
          <Projects />
        </Route>
        <Route path="/contact">
          <Contact />
        </Route>
        <Route path="/" exact>
          <Redirect to="/home" />
        </Route>
        <Route path="*">
          <NotFoundPage />
        </Route>
      </Switch>
    </Layer>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

const Layer = (props) => {
  return (
    <Fragment>
      <Navbar />
      <div className='main'>{props.children}</div>
    </Fragment>
  );
};

enter code here

标签： javascriptreactjsreact-router