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

如何手动呈现特定组件并排除特定路径中的其他组件

1 个答案: