tools/src/App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
} from 'reactstrap';
import Home from './components/Home';
import Wheels from './components/Wheels';
import Gearbox from './components/Gearbox';
import Resistor from './components/Resistor';

import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false,
    };
  }

  toggle() {
    this.setState({
      isOpen: !this.state.isOpen,
    });
  }

  render() {
    return (
      <Router>
        <div className="App">
          <Navbar color="dark" dark expand="md">
            <NavbarBrand href="/">
Car tools
            </NavbarBrand>
            <NavbarToggler onClick={this.toggle} />
            <Collapse isOpen={this.state.isOpen} navbar>
              <Nav className="ml-auto" navbar>
                <UncontrolledDropdown nav inNavbar>
                  <DropdownToggle nav caret>
                    Mécanique
                  </DropdownToggle>
                  <DropdownMenu right>
                    <DropdownItem tag={Link} to="/Wheels">
                      Roues
                    </DropdownItem>
                    <DropdownItem tag={Link} to="/Gearbox">
                      Boîte de vitesse
                    </DropdownItem>
                  </DropdownMenu>
                </UncontrolledDropdown>
                <UncontrolledDropdown nav inNavbar>
                  <DropdownToggle nav caret>
                    Électronique
                  </DropdownToggle>
                  <DropdownMenu right>
                    <DropdownItem tag={Link} to="/Resistor">
                      Résistance
                    </DropdownItem>
                  </DropdownMenu>
                </UncontrolledDropdown>
              </Nav>
            </Collapse>
          </Navbar>
          <div>
            <Route exact path="/" component={Home} />
            <Route exact path="/wheels" component={Wheels} />
            <Route exact path="/Gearbox" component={Gearbox} />
            <Route exact path="/Resistor" component={Resistor} />
          </div>
        </div>
      </Router>
    );
  }
}

export default App;