如何根据 React-Router 选择的页面更改 NAV 的样式

Question

我正在使用 React Router 构建我的 NAV 标题栏。

根据我的应用程序被路由到的页面，我想更改标题的样式。

例如，在下面的代码中，如果我的应用程序被路由到“/”，我希望 NAV 的样式定义为：

className={classes.HeaderA}
src={headerLogoA}
className={classes.LogoA}

但如果它被路由到“/video”或“/industry”，我希望 NAV 的样式定义为：

className={classes.HeaderB}
src={headerLogoB}
className={classes.LogoB}

我考虑过使用状态变量“originalHeader”来确定使用哪种类型的样式，“true”用于样式 A，“false”用于样式 B。

我认为我可以使用“this.setState({ originalHeader: false})”让特定的“Route”或“NavLink”标签将此变量更改为“true”或“false”。如：

<NavLink {this.setState({ originalHeader: false})} to="/video" exact>About<br></br>OpenSeatDirect</NavLink>

或者，

<Route {this.setState({ originalHeader: false})} path="/video" exact component={ Video }/>

然后，我将定义一个变量，例如“NavType”，以根据“originalHeader”的值使用样式 A 或 B 返回我的代码的“Nav”部分。即使下面的代码显示了这个变量的定义，我也没有在后面的代码中使用它。

当我尝试将“this.setState({ originalHeader: false})”添加到起始“Route”或“NavLink”标签时，抛出了一个错误。

有什么建议吗？

import React, { Component } from 'react';
import { Route, NavLink } from 'react-router-dom';

import Aux from '../../hoc/Auxiliary/Auxiliary';
import Main from '../../containers/Main/Main';
import Video from '../../containers/Video/Video';
import Industry from '../../containers/Industry/Industry';

import classes from './Layout.css';
import headerLogoA from '../../imageA.png';
import headerLogoB from '../../imageB.png';

class Layout extends Component {
    state = {
        originalHeader: true
    }

    let NavType = (
        if (this.state.originalHeader) {
            return (
                <Nav className={classes.HeaderA}>
                    <ul >
                        <li><img src={headerLogoA} className={classes.LogoA}/></li>
                        <li><NavLink to="/" exact>Home<br></br>Page</NavLink></li>
                        <li><NavLink to="/video" exact>About<br></br>OpenSeatDirect</NavLink></li>
                        <li><NavLink to="/industry" exact>Industry<br></br>Overview</NavLink></li>
                    </ul>
                </Nav>
        else {
            return (
                <Nav className={classes.HeaderB}>
                    <ul >
                        <li><img src={headerLogoB} className={classes.LogoB}/></li>
                        <li><NavLink to="/" exact>Home<br></br>Page</NavLink></li>
                        <li><NavLink to="/video" exact>About<br></br>OpenSeatDirect</NavLink></li>
                        <li><NavLink to="/industry" exact>Industry<br></br>Overview</NavLink></li>
                    </ul>
                </Nav>

    render () {
        return (
            <Aux>     


                // I though of replacing this section with "{NavType}"      
                <Nav className={classes.HeaderA}>
                    <ul >
                        <li><img src={headerLogoA} className={classes.LogoA}/></li>
                        <li><NavLink to="/" exact>Home<br></br>Page</NavLink></li>
                        <li><NavLink to="/video" exact>About<br></br>OpenSeatDirect</NavLink></li>
                        <li><NavLink to="/industry" exact>Industry<br></br>Overview</NavLink></li>
                    </ul>
                </Nav>
                // up to here would be replace with "{NavType}"


                <Route path="/" exact component={ Main }/>
                <Route path="/video" exact component={ Video }/>
                <Route path="/industry" exact component={ Industry }/>

            </Aux>
        )
    }
}

export default Layout;

Answer 1

您有几个选择，具体取决于您想如何做事。但是，在我个人看来，标题不是页面的一部分，因此应该单独呈现。因此，我将在路由级别呈现具有正确标题的页面。如果路由从“组件”更改为“渲染”，您可以通过更改渲染方法来做到这一点，并在页面之前包含一个标题组件。

<Route
    path="/video"
    exact
    render={(routeProps) => 
        <React.Fragment>
            <Header styleType={1}/>
            <Video />
        </React.Fragment> }/> 
    }
/>

另一种选择是测试页面组件内的路由器属性并相应地设置标题的样式。

Answer 2

如果您想在点击链接时设置状态，您可以尝试在链接上使用点击处理程序：

onClick={()=>{this.setState({originalHeader:false})}}

如果导航由路由组件渲染，您可以在 componentDidMount() 和 componentWillReceiveProps() 中读取 url。对于那个用途

this.props.location.path

并根据值更改状态。