【发布时间】：2020-07-26 18:43:02
【问题描述】：
我的网站页面是用这些组件构建的：
<Header />
<Routes />
<Footer />
显然，所有页面的 Header 和 Footer 总是相同的，但是从 Routes 加载的内容对于每个页面并不相同。好的，我点击了 Header 组件中的菜单选项。我转到页面，菜单选项的名称下划线正确。
例如，我在家并点击常见问题解答，我转到常见问题解答页面并且常见问题解答选项带有下划线。
但是，我可以从 Routes 或 Footer 组件转到任何页面。例如，在页脚组件中，我可以选择转到常见问题页面。如果我点击这个选项，我会进入FAQ页面，但是菜单中FAQ选项的样式没有更新。
我已经检查过，在这种情况下，不会调用像 componentDidMount 或 componentDidUpdate 这样的方法。
因此，如何始终更新 Header 组件中的菜单选项？
编辑我：
header.js 文件
import React, { Component } from "react";
import {Row, Col} from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import { NavLink } from "react-router-dom";
import "../css/header.css";
import logo from "../images/logo.png";
export class Header extends Component{
constructor(props){
super(props);
this.state = {
option1: String(window.location).endsWith("/faqs"),
option2: String(window.location).endsWith("/about"),
option3: String(window.location).endsWith("/login")
}
this.handleClick = this.handleClick.bind(this);
}
componentDidMount(){
window.scrollTo(0, 0);
console.log("Header.js(ComponentDidMount): Component cargado correctamente!!!");
}
componentDidUpdate(){
window.scrollTo(0, 0);
console.log("Header.js(componentDidUpdate): Component cargado correctamente!!!");
}
removeUnderline(){
this.setState({
option1: false,
option2: false,
option3: false
})
}
handleClick(event){
this.removeUnderline();
if (event.target.id !== "logo"){
this.setState({
option1: event.target.id === "option1",
option2: event.target.id === "option2",
option3: event.target.id === "option3"
})
}
}
render(){
return(
<header style = {{width: 100 + "%"}}>
<Row style = {{margin: 0}}>
<Col md = {6} style = {{textAlign: "left"}}>
<NavLink to="/" onClick = {this.handleClick}>
<img id = "logo" src = {logo} alt = "Breaded" />
</NavLink>
</Col>
<Col md = {6} style = {{textAlign: "right", paddingTop: 25 + "px", paddingRight: 20 + "px"}}>
<NavLink to="/faqs" style = {{textDecoration: (this.state.option1) ? "underline" : "none", color: "#000000"}}>
<span id = "option1" onClick = {this.handleClick} className = "option-menu">FAQS</span>
</NavLink> |
<NavLink to="/about" style = {{textDecoration: (this.state.option2) ? "underline" : "none", color: "#000000"}}>
<span id = "option2" onClick = {this.handleClick} className = "option-menu">About us</span>
</NavLink> |
<NavLink to="/login" style = {{textDecoration: (this.state.option3) ? "underline" : "none", color: "#000000"}}>
<span id = "option3" onClick = {this.handleClick} className = "option-menu">Login</span>
</NavLink>
</Col>
</Row>
</header>
)
}
}
footer.js 文件
import React from "react";
import {Row, Col} from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import InstagramIcon from '@material-ui/icons/Instagram';
import FaceboookIcon from '@material-ui/icons/Facebook';
import {NavLink} from "react-router-dom";
export const Footer = () => {
return(
<footer style = {{width: 100 + "%", fontSize: 12 + "pt"}}>
<Row style = {{margin: 0, textAlign: "center", marginTop: 75 + "px"}}>
<Col md = {12}>
<InstagramIcon style = {{fontSize: 28 + "px"}} /> <FaceboookIcon style = {{fontSize: 28 + "px"}} />
</Col>
</Row>
<Row style = {{margin: 0, textAlign: "center", marginTop: 15 + "px", fontWeight: "bold"}}>
<Col md = {2}><NavLink to="/login" style = {{fontSize: 12 + "pt", color: "#000000", textDecoration: "none"}}>Login</NavLink></Col>
<Col md = {2}><NavLink to="/contactus" style = {{fontSize: 12 + "pt", color: "#000000", textDecoration: "none"}}>Contact us</NavLink></Col>
<Col md = {4}><NavLink to="/about" style = {{fontSize: 12 + "pt", color: "#000000", textDecoration: "none"}}>About us</NavLink></Col>
<Col md = {2}><NavLink to="/faqs" style = {{fontSize: 12 + "pt", color: "#000000", textDecoration: "none"}}>FAQ</NavLink></Col>
<Col md = {2}><NavLink to="/privacy" style = {{fontSize: 12 + "pt", color: "#000000", textDecoration: "none"}}>Privacy Policy</NavLink></Col>
</Row>
<Row style = {{marginTop: 50 + "px", marginBottom: 50 + "px"}}>
<Col md = {12} style = {{fontSize: 10 + "pt"}}>@Copyright 2020 Breaded</Col>
</Row>
</footer>
)
};
编辑二：
Router 封装到每个组件：Header、Routes 和 Footer
export const Container = () => {
return(
<div>
<Router>
<Header />
<Routes />
<Footer />
</Router>
</div>
)
}
routes.js
import React from "react";
import { Home } from "./pages/home/home";
import { About } from "./pages/about";
import FAQ from "./pages/faq/faq";
import { Plans } from "./pages/plans/plans";
import { P404 } from "./pages/notfound";
import {
Switch,
Route,
} from "react-router-dom";
export const Routes = () => {
return(
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
<Route exact path="/faqs" component={FAQ} />
<Route exact path="/plans" component={Plans} />
<Route component={P404} />
</Switch>
)
}
我做错了什么？
【问题讨论】：
-
如何开始修改样式？单击标题中与菜单样式相关的链接会采取哪些操作？我们需要看一些代码。
-
我已经用 Header 组件和 Footer 组件的代码更新了我的原始帖子。希望对你有帮助！！！
-
您的路线配置似乎不正确。你能在路由层次结构中寻找 react-router
locationprop，或者，用withRouterHOC 包装 Header 组件吗？ stackoverflow.com/questions/51599479/…
标签： javascript reactjs