使用 React Router 根据当前视图有条件地渲染背景图像答案

【问题标题】：Conditionally render a a background image based on current view using React Router使用 React Router 根据当前视图有条件地渲染背景图像
【发布时间】：2020-05-26 14:24:58
【问题描述】：

我在父组件上设置了背景图片。当我路由到父组件中的子组件时，我不想看到这个背景图片，有什么想法吗？

我的 app.js 渲染代码是：

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

【问题讨论】：

尝试将 backgroundImage 添加到登录组件
如果我在登录组件中添加它作为 div 应用，而不是应用整个页面
stackoverflow.com/help/minimal-reproducible-example
试试这个？ 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> );
工作完美..！

标签： javascript css reactjs react-router

【解决方案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>
);

【讨论】：

为什么你有两个.App div，一个在另一个里面？此外，您应该要求@blueseal 发表他的评论作为答案。
最好将div.App 放在Login 组件中，而不是将其包装在Route 中。
好吧，OP可以给className=App2而不是App，然后为App2类管理style。我刚刚发布了作为评论 OP 可以调整样式

【解决方案2】：

你需要检查用户是否登录

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

【讨论】：

【解决方案3】：

你可以这样做

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>
);

【讨论】：

只显示图片，连页面内容都没有显示

【解决方案4】：

使用 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>
  );

【讨论】：