Javascript React路由器由于其结构而不渲染组件

我刚刚更改了应用程序组件的结构，现在路由器没有呈现任何组件。这是我的

App.js

文件。如果我删除

MiddleContainer

组件，它将正常工作。这些组件中的任何一个都没有路由器，所以嵌套路由没有问题。我认为这是因为

App.js

的结构，因为我读到交换机应该将Route作为其直接子级

import "./App.css";
import React from "react";
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import HomePage from './components/HomePage';
import NavBar from './components/NavBar';
import Signin from './components/auth/Signin';
import Signup from './components/auth/Signup';
import PostQuestion from './components/Question/PostQuestion';
import PostDetails from './components/Question/PostDetails';
import MiddleContainer from './components/MiddleContainer';
import LeftContainer from './components/LeftContainer';
import RightContainer from './components/RightContainer';
import { Row } from 'react-bootstrap';

function App() {

  return (
        <Router>
          <NavBar/>
          <Row>
            <LeftContainer />
            <MiddleContainer>
            <Switch>
                  <Route exact path="/" component={HomePage} />
                  {/* Auth Routes */}
                  <Route exact path="/auth/signup" component={Signup} />
                  <Route exact path="/auth/signin" component={Signin} />
                  {/* Post Routes */}
                  <Route exact path="/postquestion" component={PostQuestion} />
                  <Route exact path="/question/:id" component={PostDetails} />
                </Switch>
            </MiddleContainer>
            <RightContainer />
          </Row>
        </Router>

  );
}

export default App;

导入“/App.css”； 从“React”导入React； 从“react Router dom”导入{BrowserRouter as Router，Route，Switch}； 从“./组件/主页”导入主页； 从“./components/NavBar”导入NavBar； 从“./components/auth/Signin”导入登录； 从“/components/auth/Signup”导入注册； 从“./components/Question/PostQuestion”导入PostQuestion； 从“/components/Question/PostDetails”导入PostDetails； 从“./components/MiddleContainer”导入MiddleContainer； 从“./components/LeftContainer”导入LeftContainer； 从“./components/RightContainer”导入RightContainer； 从'react bootstrap'导入{Row}； 函数App（）{ 返回( {/*验证路由*/} {/*邮政路线*/} ); } 导出默认应用程序； MiddleContainer.js

import React from 'react';
import { Col } from 'react-bootstrap';

const MiddleContainer = () => {
    return (
        <Col md={8}>
            
        </Col>
    )
}

export default MiddleContainer;

import React from 'react';
import { Col } from 'react-bootstrap';

const LeftContainer = () => {
    return (
        <Col md={2}>
            
        </Col>
    )
}

export default LeftContainer;

import React from 'react';
import { Col } from 'react-bootstrap';

const RightContainer = () => {
    return (
        <Col md={2}>
            
        </Col>
    )
}

export default RightContainer;

从“React”导入React；
从'react bootstrap'导入{Col}；
常量容器=（）=>{
返回(
)
}
导出默认的中间容器；

LeftContainer.js

import React from 'react';
import { Col } from 'react-bootstrap';

const MiddleContainer = () => {
    return (
        <Col md={8}>
            
        </Col>
    )
}

export default MiddleContainer;

import React from 'react';
import { Col } from 'react-bootstrap';

const LeftContainer = () => {
    return (
        <Col md={2}>
            
        </Col>
    )
}

export default LeftContainer;

import React from 'react';
import { Col } from 'react-bootstrap';

const RightContainer = () => {
    return (
        <Col md={2}>
            
        </Col>
    )
}

export default RightContainer;

从“React”导入React；
从'react bootstrap'导入{Col}；
const LeftContainer=（）=>{
返回(
)
}
导出默认的LeftContainer；

RightContainer.js

import React from 'react';
import { Col } from 'react-bootstrap';

const MiddleContainer = () => {
    return (
        <Col md={8}>
            
        </Col>
    )
}

export default MiddleContainer;

import React from 'react';
import { Col } from 'react-bootstrap';

const LeftContainer = () => {
    return (
        <Col md={2}>
            
        </Col>
    )
}

export default LeftContainer;

import React from 'react';
import { Col } from 'react-bootstrap';

const RightContainer = () => {
    return (
        <Col md={2}>
            
        </Col>
    )
}

export default RightContainer;

从“React”导入React；
从'react bootstrap'导入{Col}；
const RightContainer=（）=>{
返回(
)
}
导出默认的RightContainer；
< /代码> 您还需要选择显示中间组件中的子类，如：

import React from 'react';
import { Col } from 'react-bootstrap';

const MiddleContainer = (props) => {
    return (
        <Col md={8}>
            {props.children}
        </Col>
    )
}

export default MiddleContainer;

从“React”导入React；
从'react bootstrap'导入{Col}；
const MiddleContainer=（道具）=>{
返回(
{props.children}
)
}
导出默认的中间容器；