Question

我需要当用户返回家中时导航栏的颜色变得透明，以便全屏欣赏视图的背景

我找到了一个具有所需效果的示例页面：https://angular.io/我需要这样做，但是在做出反应

here my project code

Answer 1

有两种方法：

在Header.js渲染方法中，您可以检查window.location.pathname是否匹配/，它是root用户，通常是主页。如果这是正确的，请将一些类附加到header元素并相应地设置样式。
在Header.js中，您可以import { withRouter } from "react-router-dom";之后可以在导出组件的底部使用HOC（高阶组件）withRouter export default withRouter(Header);

在此之后，您可以使用componentWillReceiveProps生命周期方法（阅读更多here），并检查nextProps.location.pathname是否与/匹配并相应地设置状态，然后您可以使用追加课程。

Answer 2

您可以根据react-router的路线参数设置标题类/样式然后，如果您在主页路线中设置颜色并可能使其不固定（如果您希望它的行为类似于angular.io）

Answer 3

我很高兴，谢谢。这是我的代码

index.js

.
.
 import {... HashRouter,withRouter**} from 'react-router-dom';
.
.
 const HeaderWithRouter = withRouter(Header);//<- needed this
ReactDOM.render(
    <div className="App"> 

         <HashRouter>
             <HeaderWithRouter/> // to use here to have access to this.props.location in the header
        </HashRouter>

        <div className="app-body">
          <main className="main">
            <Container fluid>
                <HashRouter>
                  <Switch>
                    <Route path="/home" name="Home" component={Home}/>
                    <Route path="/login" name="Login" component={Login}/>
                    <Redirect from="/" to="/home"/>
                  </Switch>
                </HashRouter>
.
.
.

header.js

<Navbar className={(this.props.location.pathname === "/home") ?"headerTransparent":"navbar-inverse"} collapseOnSelect >

更改导航栏的背景，仅适用于主页

3 个答案: