Routers and API's ( n°4 )

A few more days have gone by and i have made so more progress in my course, here is what i have learnt :

  • the React Router:

    The React Router is what lets you add routes to your app, and its quite straight forward! First of all you import Reacts browser router (There is also a router for React native), and a few other functionalities.

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

    Next you open a <Router> tag, then open a <Switch> tag, and all your routes go in it

    <Router>
          <Switch>
            //home route
            <Route exact path="/">
              <Home />
            </Route>
            //about route
            <Route path="/about">
              <About />
            </Route>
            //contact route
            <Route path="/contact">
              <Contact />
            </Route>
          </Switch>
        </Router>
    

    Now that you have your routes, you need to be able to navigate in between them, so in a menu component you can add <Link>tags.

    <Link to="/" >Home</Link>
    <Link to="/about" >About</Link>
    <Link to="/contact" >Contact</Link>
    
  • I also used an API, althought i already knew how to do that with vanilla javascript.

Thats it for today!