Javascript React Router在路由到新组件后仍呈现上一页

我正在为我的网站做一个登录页，它将有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;

在着陆组件中，我有以下设置：

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工具中，我的任何组件都没有这些道具。

---

如何在单击按钮时切换组件？谢谢。

当URL与组件的路径属性匹配时，也称为。当您位于/login页面时，React router将在组件树中相应的位置呈现组件

问题是您的登录名，更具体地说，您的登录名在组件内部

如果希望呈现不带标题的登录页面，则应将和组件放置在中，彼此相邻。然后，使用React Router的组件有条件地渲染它们：

A将迭代其所有子元素，并仅呈现与当前位置匹配的第一个元素。有关详细信息，请参阅

以下是一个未经测试的示例：

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>
        );
    }
}

---

当URL与组件的path属性匹配时，即当您位于/login页面时，React router将在组件树中相应的位置呈现组件

问题是您的登录名，更具体地说，您的登录名在组件内部

如果希望呈现不带标题的登录页面，则应将和组件放置在中，彼此相邻。然后，使用React Router的组件有条件地渲染它们：

A将迭代其所有子元素，并仅呈现与当前位置匹配的第一个元素。有关详细信息，请参阅

以下是一个未经测试的示例：

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>
        );
    }
}

---

你的观点对我很有意义。你能和我分享一个合适的教程，解释如何从导航栏列表项目和点击按钮路由组件你的代码工作。谢谢我之前曾尝试用withRouter包装着陆组件，但没有期望的输出。请与我共享好的资源，因为我看到的教程已经过时，因为一些组件已从react router dom中分离出来，并移动到react router，因此我无法在线跟踪更改和示例我需要在中声明所有路由吗路由文件，或者我可以在只需要它们的组件中使用它们？我个人在需要信息时使用。您真正需要的组件只有，和。你可以在任何组件中声明你的路由，但它们必须在中，这就是为什么我们通常将它放在根组件中。你的观点对我来说很有意义。你能和我分享一个合适的教程，解释如何从导航栏列表项目和点击按钮路由组件你的代码工作。谢谢我之前曾尝试用withRouter包装着陆组件，但没有期望的输出。请与我共享好的资源，因为我看到的教程已经过时，因为一些组件已从react router dom中分离出来，并移动到react router，因此我无法在线跟踪更改和示例我需要在中声明所有路由吗路由文件，或者我可以在只需要它们的组件中使用它们？我个人在需要信息时使用。您真正需要的组件只有，和。您可以在任何组件中声明路由，但它们需要在中，这就是为什么我们通常将其放在根组件中。