如何手动渲染特定组件并在特定路由中排除其他组件

Question

我有Header 和Footer 组件，用于包围内部页面。

我还有一个Login组件，在用户未登录时出现。这个组件没有实现Header或Footer组件。

问题是我无法阻止Header 和Footer 组件被Login 组件渲染。我不能排除 Login 组件单独渲染。

我尝试了Switch 标签，但没有成功。

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { connect } from 'react-redux';
import * as actions from '../actions';

import Header from "./Header";
import Footer from "./Footer";
import Login from "./Login";
import manageCategories from "./manageCategories";

class App extends Component {
    componentDidMount() {
        this.props.fetchUser();
    }
    render() {
        return (
            <div>
                <BrowserRouter>
                    <div>
                        <Route exact path="/login" component={Login} />
                        <Header />
                        <Route exact path="/manage-categories" component={manageCategories} />
                        <Footer />
                    </div>
                </BrowserRouter>
            </div>
        );
    }
}

export default connect(null, actions)(App);

Answer 1

您应该添加一个与登录组件平行的新组件以包含Header 和Footer 组件。

<Route path="/home" component={Layout}/>
<Route exact path="/login" component={Login}/>

和布局：

    render() {
        return <div>
            <Header />
            <Route exact path={this.props.match.path} component={Home} />
            <Route path={`${this.props.match.path}/manageCategories`} component={manageCategories} />
            <Route path={`${this.props.match.path}/other`} component={otherComponent} />
            <Footer />
        </div>
    }