Блог

Главная - Вопросы по программированию - как сделать панель навигации прозрачной для фонового изображения в react

как сделать панель навигации прозрачной для фонового изображения в react

#javascript #reactjs #react-router

Вопрос:

у меня есть проект, в котором я использую компонент layer для отображения компонента navbar и основного, и я использую его в качестве макета для маршрутов приложений. проблема в том, как отобразить прозрачную навигационную систему для каждого маршрута, у которого другое основное фоновое изображение. ?

 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

Комментарии:

1. Как Navbar выглядит ваш компонент?

2. должен ли я отображать код компонента Navbar в сообщении ?

3. Конечно, будет лучше, если вы сможете хранить их в кодовом ящике.

4. хорошо, я добавлю им компонент и модуль css, если вы тоже этого хотите.

5. Да, это очень поможет

Метки: