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,
  NavItem,
  NavLink,
} from 'reactstrap';
import Home from './components/Home';
import Wheels from './components/Wheels';
import Gearbox from './components/Gearbox';
import Leds from './components/Leds';

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>
                <NavItem>
                  <NavLink tag={Link} to="/Wheels">
Roues
                  </NavLink>
                </NavItem>
                <NavItem>
                  <NavLink tag={Link} to="/Gearbox">
Boite de vitesse
                  </NavLink>
                </NavItem>
                <NavItem>
                  <NavLink tag={Link} to="/Leds">
Résistances
                  </NavLink>
                </NavItem>
              </Nav>
            </Collapse>
          </Navbar>
          <div>
            <Route exact path="/" component={Home} />
            <Route exact path="/wheels" component={Wheels} />
            <Route exact path="/Gearbox" component={Gearbox} />
            <Route exact path="/Leds" component={Leds} />
          </div>
        </div>
      </Router>
    );
  }
}

export default App;