Question

我正在为我的网站制作一个登录页面，该页面将包含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 Tools中，我的组件都没有这些道具。如何在单击按钮时切换组件？谢谢。

Answer 1

当URL与path组件的<Route>属性匹配时，也就是当您进入/login页面时，React路由器将呈现<Login>组件在组件树中对应的<Route>所在的位置。

问题在于您的<Router>，更具体地说是您的登录名<Route>在<Landing>组件的内部。

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

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

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

1 个答案: