Это js-файл, в который я добавил свой маршрутизатор, и он содержит весь маршрут моего маршрутизатора приложений. Ниже приведен код моего App.js

 export default class App extends Component {
    static displayName = App.name;
    render() {
        return (
            <Router>
                <Layout />
                <Switch>
                    <Route path='/employee' exact component={Employee} />
                    <Route path='/employer' component={Employer} />
                    <Route path='/addEmployer' component={AddEmployer} />
                    <Route path='/user' component={UserManagement} />
                    <Route path='/addUser' component={AddUser} />
                </Switch>
            </Router>
        );
    }
}
  

Я создал страницу макета, которая также содержит мой компонент панели навигации, компонент боковой панели, основное содержимое и нижний колонтитул.
Ниже приведен код Layout.js . Я хочу, чтобы мой макет был статичным во всем приложении

 import React, { Component } from 'react';
import { Container } from 'reactstrap';
import '../../css/main.css';

import { Navbar } from './Navbar';
import { Footer } from './Footer';
import { SideNavbar } from './SideNavbar';

export class Layout extends Component {
    static displayName = Layout.name;
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <Navbar />
                <div id="layoutSidenav">
                    <SideNavbar />
                    <div id="layoutSidenav_content">
                        <main className="flex">
                            {this.props.children}
                        </main>
                        <Footer />
                    </div>
                </div>
            </div>
        );
    }
}
  

Когда я маршрутизирую работодателя по URL, компонент работодателя не отображается в основной папке.
в настоящее время он отображается под нижним колонтитулом страницы. Это вызывает проблему при создании моего приложения как SPA.

Ожидание ответа

Проблема

Похоже, что ваш Layout компонент предназначен для отображения содержимого как children , но в вашем App компоненте вы не передаете ему никаких дочерних элементов. Отображается Switch под / после Layout компонента.

 class Layout extends Component {
  static displayName = Layout.name;
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <Navbar />
        <div id="layoutSidenav">
          <SideNavbar />
          <div id="layoutSidenav_content">
            <main className="flex">
              {this.props.children} // <-- content
            </main>
            <Footer />
          </div>
        </div>
      </div>
    );
  }
}

class App extends Component {
  static displayName = App.name;
  render() {
    return (
      <Router>
        <Layout /> // <-- no children
        <Switch>
          <Route path='/employee' exact component={Employee} />
          <Route path='/employer' component={Employer} />
          <Route path='/addEmployer' component={AddEmployer} />
          <Route path='/user' component={UserManagement} />
          <Route path='/addUser' component={AddUser} />
        </Switch>
      </Router>
    );
  }
}
  

Решение

Оберните Switch .

 class App extends Component {
  static displayName = App.name;
  render() {
    return (
      <Router>
        <Layout>
          <Switch>
            <Route path='/employee' exact component={Employee} />
            <Route path='/employer' component={Employer} />
            <Route path='/addEmployer' component={AddEmployer} />
            <Route path='/user' component={UserManagement} />
            <Route path='/addUser' component={AddUser} />
          </Switch>
        </Layout>
      </Router>
    );
  }
}
  

Маршрутизатору необходимо определить, где мы хотели отобразить наш компонент. Как и в моем случае, он должен находиться под самим компонентом макета, а не определяющим в App.js часть