CODEWITHSUNDEEP
javascriptreactjsreact-router-dom
Soham Gadhave
Soham Gadhave

Reputation: 95

React router not rendering components due to its structure

I just changed the structure of my App component and now the Router is not rendering any components. Here is my App.js file. If I remove the MiddleContainer component, it works perfectly. Any of those components don't have a Router in them, so no problem with nested Routing. I think it's because of the structure of App.js because I read that Switch should have Route as its direct child.

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;

Upvotes: 1

Views: 50

Answers (1)

J Livengood
J Livengood

Reputation: 2738

You need to also choose to show the children in the middle component like so:

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

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

export default MiddleContainer;

Upvotes: 1

Related Questions