React component not showing, also not giving any errors

Question

Im new to React and im currently making a simple website with a dashboard, my register and login is showing and working yet my dashboard component doesnt show at all and i also get 0 errors. Im unsure as to what i am doing wrong.

Here is my file structure

App.js

import React from 'react';
import Dashboard from './Components/Dashboard/Dashboard';
import Register from './Components/Auth/Register';
import Login from './Components/Auth/Login';
import { BrowserRouter as Router, Route } from "react-router-dom";

function App() {

  return (
    <div className="Wrapper">
    <Router>
      <Route path ="/dasboard" component={Dashboard} />
      <Route exact path="/" component={Register} />
      <Route path="/login" component={Login} />
    </Router>
    </div>
  );
}

export default App;

Dashboard.js

import React from "react";
import "../Components CSS/Dashboard/Dashboard.css";
import "bootstrap-4-grid/css/grid.min.css";

class Dashboard extends React.Component {
  render() {
    return (
      <div className="bootstrap-wrapper">
        <div className="app-container container">
          <div className="row">
            <div className="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
              <h1>Sales | Q4 2018</h1>
            </div>
            <div className="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
              <button>Share</button>
              <button>Export to PDF</button>
            </div>
          </div>
          <div className="row">
            <div className="col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
              <h4>Panel Bar Container</h4>
            </div>
            <div className="col-xs-9 col-sm-9 col-md-9 col-lg-9 col-xl-9">
              <div className="row">
                <div className="col-xs-6 col-sm-6 col-md-4 col-lg-4 col-xl-4">
                  <h4>Donut Chart Container</h4>
                </div>
                <div className="col-xs-6 col-sm-6 col-md-2 col-lg-2 col-xl-2">
                  <div className="percentage-container">
                    <span className="percentage-number">94</span>
                    <span className="percentage-sign">%</span>
                    <p>CUSTOMER SATISFACTION</p>
                  </div>
                  <div className="percentage-container">
                    <span className="percentage-number">89</span>
                    <span className="percentage-sign">%</span>
                    <p>TARGET SALES</p>
                  </div>
                </div>
                <div className="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                  <h4>Bar Chart Container</h4>
                </div>
              </div>
              <div className="row">
                <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                  <h4>Grid Container</h4>
                </div>
              </div>
            </div>
          </div>
          <h4 style={{ display: "none" }}>Dialog Shown/Hidden with Logic</h4>
        </div>
      </div>
    );
  }
}

export default Dashboard;

Any help/suggestions on this matter would be appreciated.

Answer 1

I thing you have written wrong dashboard spelling.

<Route path ="/dashboard" component={Dashboard} />