Topic: My app is blank after using Navbar and react-router-dom
                  
                  Ana Luiza Barreto Marinho
                  free
                  asked 6 years ago
                
Expected behavior App was supposed to be showing something, anything...
Actual behavior It's blank, literally, just a blank page, no console error, no compilation errors
Resources (screenshots, sample code.) Here's my index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
// Components
import './index.scss';
import App from './components/App';
import ClientArea from './components/ClientArea';
ReactDOM.render(
    <BrowserRouter>
        <Switch>
            <Route path="/" exact={true} component={App} />
            <Route path="/clientArea" component={ClientArea} />
        </Switch>
</BrowserRouter>,
document.querySelector('#root'));
My app.js
import React from 'react';
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
import MenuBar from './MenuBar';
import About from './About';
import Solutions from './Solutions';
import Footer from './Footer';
import "../topBar.scss";
import "../mainPage.scss";
const App = () => {
    return (
    <div>
        <MDBContainer id="beginning" fluid>
            <MDBRow className="mainPage">
                <MDBCol>
                    <MenuBar />
                </MDBCol>
            </MDBRow>
        <MDBRow id="about" className="about overflow-hidden">
            <h1 className="title">Sobre</h1>
            <MDBCol>
                <About />
            </MDBCol>
        </MDBRow>
        <MDBRow id="solutions" className="solutions">
            <h1 className="title">Soluções</h1>
            <MDBCol>
                <Solutions />
            </MDBCol>
        </MDBRow>
    </MDBContainer>
    <MDBContainer fluid>
        <MDBRow id="footer">
            <MDBCol>
                <Footer />
            </MDBCol>
        </MDBRow>
        </MDBContainer>
    </div>
);
}
export default App
and MenuBar.js
import { React, Component  } from 'react';
import {
  MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink,             MDBNavbarToggler, MDBCollapse, MDBFormInline,  MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem
} from "mdbreact";
import "../topBar.scss";
import "../index.scss";
// import ModalWindow from "./Modal";
class MenuBar extends Component {
  state = {
    isOpen: false
  };
  toggleCollapse = () => {
    this.setState({ isOpen: !this.state.isOpen });
  }
  render() {
    return (
      <MDBNavbar color="indigo" dark expand="md">
        <MDBNavbarBrand>
          <strong className="white-text">Navbar</strong>
        </MDBNavbarBrand>
        <MDBNavbarToggler onClick={this.toggleCollapse} />
        <MDBCollapse id="navbarCollapse3" isOpen={this.state.isOpen} navbar>
          <MDBNavbarNav left>
            <MDBNavItem active>
              <MDBNavLink to="#!">Home</MDBNavLink>
            </MDBNavItem>
            <MDBNavItem>
              <MDBNavLink to="#!">Features</MDBNavLink>
            </MDBNavItem>
            <MDBNavItem>
              <MDBNavLink to="#!">Pricing</MDBNavLink>
            </MDBNavItem>
            <MDBNavItem>
              <MDBDropdown>
                <MDBDropdownToggle nav caret>
                  <span className="mr-2">Dropdown</span>
                </MDBDropdownToggle>
                <MDBDropdownMenu>
                  <MDBDropdownItem href="#!">Action</MDBDropdownItem>
                  <MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
                  <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                  <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            </MDBNavItem>
          </MDBNavbarNav>
          <MDBNavbarNav right>
            <MDBNavItem>
          <MDBFormInline waves>
            <div className="md-form my-0">
              <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
            </div>
          </MDBFormInline>
        </MDBNavItem>
      </MDBNavbarNav>
    </MDBCollapse>
  </MDBNavbar>
);
  }
}
export default MenuBar
                
                  
                      
                      Aliaksandr Andrasiuk
                      staff
                        answered 6 years ago
                    
Hi,
Can't get you the answer because you have imported some `.sass` files. Maybe it causes the problem. Can you check your NavBar in devTools(for example, is it existing in DOM)?
Here is the code I used to reproduce your case and it works well:
App.js : 
import React from "react";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
import MenuBar from "./MenuBar";
// import About from './About';
// import Solutions from './Solutions';
// import Footer from './Footer';
// import "../topBar.scss";
// import "../mainPage.scss";
const App = () => (
  <MDBContainer id="beginning" fluid>
    <MDBRow className="mainPage">
        <MDBCol>
            <MenuBar />
        </MDBCol>
    </MDBRow>
  </MDBContainer >
);
export default App;
MenuBar.js : 
import React, { Component } from "react";
import {
  MDBNavbar,
  MDBNavbarBrand,
  MDBNavbarNav,
  MDBNavItem,
  MDBNavLink,
  MDBNavbarToggler,
  MDBCollapse,
  MDBFormInline,
  MDBDropdown,
  MDBDropdownToggle,
  MDBDropdownMenu,
  MDBDropdownItem
} from "mdbreact";
class NavbarPage extends Component {
  state = {
    isOpen: false
  };
  toggleCollapse = () => {
    this.setState({ isOpen: !this.state.isOpen });
  };
  render() {
    return (
      <MDBNavbar color="indigo" dark expand="md">
        <MDBNavbarBrand>
          <strong className="white-text">Navbar</strong>
        </MDBNavbarBrand>
        <MDBNavbarToggler onClick={this.toggleCollapse} />
        <MDBCollapse id="navbarCollapse3" isOpen={this.state.isOpen} navbar>
          <MDBNavbarNav left>
            <MDBNavItem active>
              <MDBNavLink to="#!">Home</MDBNavLink>
            </MDBNavItem>
            <MDBNavItem>
              <MDBNavLink to="#!">Features</MDBNavLink>
            </MDBNavItem>
            <MDBNavItem>
              <MDBNavLink to="#!">Pricing</MDBNavLink>
            </MDBNavItem>
            <MDBNavItem>
              <MDBDropdown>
                <MDBDropdownToggle nav caret>
                  <span className="mr-2">Dropdown</span>
                </MDBDropdownToggle>
                <MDBDropdownMenu>
                  <MDBDropdownItem href="#!">Action</MDBDropdownItem>
                  <MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
                  <MDBDropdownItem href="#!">
                    Something else here
                  </MDBDropdownItem>
                  <MDBDropdownItem href="#!">
                    Something else here
                  </MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            </MDBNavItem>
          </MDBNavbarNav>
          <MDBNavbarNav right>
            <MDBNavItem>
              <MDBFormInline waves>
                <div className="md-form my-0">
                  <input
                    className="form-control mr-sm-2"
                    type="text"
                    placeholder="Search"
                    aria-label="Search"
                  />
                </div>
              </MDBFormInline>
            </MDBNavItem>
          </MDBNavbarNav>
        </MDBCollapse>
      </MDBNavbar>
    );
  }
}
export default NavbarPage;
index.js: 
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router } from 'react-router-dom';
const app = (
    <Router>
        <App />
    </Router>
)
ReactDOM.render(app, document.getElementById('root'));
                    
                      Ana Luiza Barreto Marinho free commented 6 years ago
It solved it partially, where should I get the serviceWorker file from? o_O
Aliaksandr Andrasiuk staff commented 6 years ago
You can delete this import. It's unnecessary.
Did it help you or you still have a blank page?
Ana Luiza Barreto Marinho free commented 6 years ago
It helped, thanks :D
Ana Luiza Barreto Marinho free commented 6 years ago
It helped, thanks :D
Aliaksandr Andrasiuk staff commented 6 years ago
Glad I could help ;)
Best regards.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
 - Premium support: No
 - Technology: MDB React
 - MDB Version: 4.16.0
 - Device: PC
 - Browser: Chrome
 - OS: Pop! OS (Ubuntu)
 - Provided sample code: No
 - Provided link: No