Krafalski/water-bar-blade-runner

This project was bootstrapped with Create React App.

• Download, make sure you're in the same folder as package.json in terminal
• run npm i
• run npm start

React Router

When we create a single page application, our route never changes. So if we want to send someone a link to the contact page of our site, we can't. It will always default to the primary view.

Additionally, managing different views using ternary operators can get really complex very quickly.

Luckily for us, we have React Router to help us out

React Router Docs

We'll just go over making a few different views. But you can use router for redirects, auth, custom links, 404s, and more.

• install react-router-dom

App.js

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

Wrap code in <Router>

return (
  <Router>
    <div className="container">
      <About />
      <Contact />
      <Location />
      <Menu />
    </div>
  </Router>
);

Add Router Links:

<div className="container">
  <nav>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
    <Link to="/contact">Contact</Link>
    <Link to="/locations">Locations</Link>
  </nav>

Add Route components

<Route path="/" exact component={Menu} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route path="/locations" component={Location} />

Entire Code:

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import "./App.css";
import About from "./components/About.js";
import Contact from "./components/Contact.js";
import Location from "./components/Location";
import Menu from "./components/Menu.js";

class App extends React.Component {
  render() {
    return (
      <Router>
        <div className="container">
          <nav>
            <Link to="/">Home</Link>
            <Link to="/about">About</Link>
            <Link to="/contact">Contact</Link>
            <Link to="/locations">Locations</Link>
          </nav>
          <Route path="/" exact component={Menu} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
          <Route path="/locations" component={Location} />
        </div>
      </Router>
    );
  }
}

export default App;