使用 React 路由器有条件地基于当前视图渲染背景图像

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