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

Question

我刚刚更改了我的 App 组件的结构，现在路由器没有渲染任何组件。这是我的App.js 文件。如果我删除 MiddleContainer 组件，它会完美运行。这些组件中的任何一个都没有路由器，因此嵌套路由没有问题。我认为这是因为 App.js 的结构，因为我读到 Switch 应该将 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;

MiddleContainer.js

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

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

export default MiddleContainer;

LeftContainer.js

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

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

export default LeftContainer;

RightContainer.js

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

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

export default RightContainer;

Answer 1

您还需要选择在中间组件中显示子组件，如下所示：

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

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

export default MiddleContainer;