路由到新组件后,React路由器仍然呈现上一页

问题描述 投票:0回答:1

我正在为我的网站制作一个目标网页,该网页将包含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中,我的组件都没有这些道具。如何在按钮点击时切换组件?谢谢。

javascript reactjs react-router
1个回答
1
投票

当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>
        );
    }
}
© www.soinside.com 2019 - 2024. All rights reserved.