App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import {
  BrowserRouter as Router,
  Route,
  Switch
} from 'react-router-dom'

// abotuus component
const AboutUs = () => (
  <div>About us</div>
)

// home component
const Home = () => (
  <div>
    <h3>This is the home</h3>
  </div>
)

// Not Found
const NotFound = ({location}) => (
  <div>
    <h3>the page { location.pathname } Not found</h3>
  </div>
)

// AccountDetails
const AccountDetails = ({ match }) => (
  <div>Hello, {match.params.username}</div>
)

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <div className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h2>Welcome to React</h2>
          </div>
          <p className="App-intro">
            <Switch>
              <Route path="/aboutus" component={AboutUs} />
              <Route path="/" exact component={Home} />
              <Route path="/user/:username" component={AccountDetails} />
              <Route component={NotFound} />
            </Switch>
          </p>
        </div>
      </Router>
    );
  }
}

export default App;