所以我在 YouTube 上看了很多关于 React 初学者的教程,
但是,我在这个 URL (localhost/) 上,单击“设置”按钮将 URL 更改为 (localhost/settings),并且不会在浏览器中自动执行,如果我使用 URL (localhost/settings) 刷新浏览器,则从 Settings.js 更新和呈现页面
如果你介意帮助我的话,这是我的代码和 JS:
header.js
class Header extends Component {
state = {
MainMenuAppeared:false
}
MainMenuShow = () =>{
this.setState({
MainMenuAppeared: true
})
}
MainMenuHide = () =>{
this.setState({
MainMenuAppeared: false
})
}
render() {
return (
<div className="Header">
<header>
{this.state.MainMenuAppeared ? (
<div id="logo" onClick={this.MainMenuHide}><WebLogo /></div>
) : (
<div id="logo" onClick={this.MainMenuShow}><WebLogo /></div>
)}
{this.state.MainMenuAppeared ?(
<Router>
<div id="MainMenu">
<Link to="/"><div className="MenuLists">Home</div></Link>
<Link to="/settings"><div className="MenuLists">Settings</div></Link>
</div></Router>) : (<div></div>)}
</header>
</div>
);
}
}
Main.js(以前称为 App.js)
function Main() {
return (
<div className="Main">
<Header />
<br></br>
<br></br>
<br></br>
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/settings" component={Settings}/>
</Switch>
</Router>
</div>
);
}
设置.js
function Settings() {
return (
<div className="Settings">
Settings
</div>
);
}
Your Header
组件应该在里面Router
成分。
在职的代码沙盒链接 https://codesandbox.io/s/recursing-poincare-wxj09
<div className="Main">
<Router>
<Header />
<br />
<br />
<br />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/settings" component={Settings} />
</Switch>
</Router>
</div>
让我知道它是否有效!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)