我正在为我的网站制作一个目标网页,该网页将包含3个组件 - 标题,主页和页脚,仅适用于目标网页。标题组件只是一个导航栏,左侧是徽标,右侧是登录按钮。
单击登录按钮时,我使用路由器渲染登录路径,但问题是登陆页面(标题,主要和着陆)的先前组件也使用新的路由登录组件进行渲染。
这是我的App.js
文件,其中插入了Landing。
import React, {Component} from 'react';
import Landing from './components/Landing/Landing';
class App extends Component {
render() {
return (
<div className="App">
<Landing/>
</div>
);
}
}
export default App;
在Landing组件中我有这个设置:
import React, {Component} from 'react';
import Header from './Header';
import Main from './Main';
import Footer from './Footer'
class Landing extends Component {
render() {
return (
<div className="container__landing">
<Header/>
<Main/>
<Footer/>
</div>
);
}
}
export default Landing;
这是我的标题组件,为简洁起见,我遗漏了另外两个组件:
import React, {Component} from 'react';
import {BrowserRouter as Router, Link} from 'react-router-dom';
import {Route, Switch} from 'react-router';
import Login from '../auth/Login';
class Header extends Component {
render() {
return (
<Router>
<header className="header">
<div className="header__nav">
<p>STRONG LIVE</p>
<button className="sign_in">
<Link to="/login">
Sign In
</Link>
</button>
</div>
<Route exact path="/login" component={Login}/>
</header>
</Router>
)
}
}
export default Header;
登录组件已呈现,但它与标题和其他当前组件一起放置在登陆组件中。
我希望登录页面是独立的,没有当前位于其上方的标题。我已经看过他们使用props.history.push('/path)
的一些教程,但是在React Dev Tools中,我的组件都没有这些道具。如何在按钮点击时切换组件?谢谢。
当URL与path
组件的<Route>
属性匹配时,a.k.a。当你在/login
页面上时,React路由器将在你的组件树中相应的<Login>
所在的位置呈现你的<Route>
组件。
问题是你的<Router>
,更具体地说你的登录<Route>
在<Landing>
组件内。
如果您希望在没有标题的情况下呈现登录页面,则应将<Landing>
和<Login>
组件放在<Route>
中,彼此相邻。然后,使用React Router的<Switch>
component有条件地渲染它们:
<Switch>
将遍历其所有子元素,并仅渲染与当前位置匹配的第一个子元素。 (有关详细信息,请参阅documentation)
这是一个(未经测试的)示例:
class App extends Component {
render() {
return (
<div className="App">
<Router>
<Switch>
{/* Render the login component alone if we're on /login */}
<Route exact path="/login" component={Login} />
{/* Otherwise, render the Landing component */}
<Route component={Landing} />
</Switch>
</Router>
</div>
);
}
}