【问题标题】：When routing , component is not rendering in Side page路由时，组件不在侧页中呈现
【发布时间】：2020-10-28 07:15:12
【问题描述】：

这是我添加路由器的 js 文件，它包含我的应用程序的所有路由路由器。下面是 My 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 时出现问题。

等待回复

【问题讨论】：

标签： reactjs rxjs react-router

【解决方案1】：

问题

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

【讨论】：

【解决方案2】：

Router 需要定义我们想要渲染组件的位置。就像在我的情况下，它应该在 Layout 组件本身而不是在 App.js 部分的定义

【讨论】：