Условное отображение фонового изображения на основе текущего представления с использованием React Router

Question

Я установил фоновое изображение для родительского компонента. Когда я направляю дочерний компонент в родительский компонент, я не хочу видеть это фоновое изображение, какие-либо идеи?

мое приложение. js код рендеринга:

return (
    <BrowserRouter>
        <div className="App" style={{ backgroundImage: `url(${bg})` }}>

            <Switch>
             <Route path="/" component={Login} exact/>
             <Route path="/Welcome" component={Welcome}/>


           </Switch>
        </div> 
      </BrowserRouter>

  );

Answer 1

Этот от @blueseal работает нормально.

return ( 
  <BrowserRouter> 
  <div className="App" > 
  <Switch> 
    <Route exact path="/" component={()=> 
    ( <div className="App" style={{ backgroundImage: `url(${bg})` }}> 
    <Login /> </div>) } /> 
    <Route path="/Welcome" component={Welcome}/> 
    </Switch> 
    </div> 
    </BrowserRouter> );

Answer 2

используйте this.props.location.pathname, чтобы получить текущий маршрут в виде строки.

используйте это для условного рендеринга фонового изображения в объекте встроенного стиля, например

return (
    <BrowserRouter>
        <div className="App" style={{ this.props.location.pathname !== "/" && backgroundImage: `url(${bg})` }}>
            <Switch>
             <Route path="/" component={Login} exact/>
             <Route path="/Welcome" component={Welcome}/>
           </Switch>
        </div> 
      </BrowserRouter>
  );

Answer 3

вам нужно проверить, вошел ли пользователь в систему

style={{ backgroundImage: `${loggedin?url(${bg}):'none'  }}`

Answer 4

вы можете сделать таким образом

return (
  <BrowserRouter>

        <Switch>
         <div className="App" style={{ backgroundImage: `url(${bg})` }}>
             <Route path="/" component={Login} exact/>
         </div>
         <div className="App">
             <Route path="/Welcome" component={Welcome}/>
         </div>
       </Switch>
  </BrowserRouter>);