React-Router?

Import react-router

So finally we come here for react-router.
Firstly, for using react-dom, you should import react-dom module!

import { BrowserRouter, Route } from "react-router-dom"

Then in a parenthesis of return, wrap jsx <Navbar /> contents by <BrowserRouter></BrowserRouter>.
So we are ready to go now! we can come back later!

App.js

import React, { Component } from "react";
import { BrowserRouter, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import Home from "./components/Home";
import About from "./components/About";
import Contact from "./components/Contact";

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Navbar />
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

<LINK> and <NavLink>

We already know we can create menu like inside <nav></nav> by <a href=""> </a> in legacy HTML convention.
However, <a> tag is always refresh the page when move to other page, which is not a efficient way. But, there is better way to use for the link and solve the problem in react-router !

<Link></Link> & <NavLink></NavLink>

Those are not needed for refreshing pages over and over again when navigating.

But what is difference between them?
<Link></Link> just act same as <a> tag in react, but there is actively add the class named active and additional attribute aria-current with value page if <NavLink></NavLink> is activated.

In addtion, <link> and <NavLink> doesn't use href attribute but to attribute! Anyway it shows in HTML as a <a> tag with href attribute though.

Navbar.js

import React from "react";
import { Link, NavLink } from "react-router-dom";

const Navbar = (props) => {
  return (
    <nav className="nav-wrapper red darken-3">
      <div className="container">
        <a className="brand-logo">Poke'Times</a>
        <ul className="right">
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <NavLink to="/about">About</NavLink>
          </li>
          <li>
            <NavLink to="/contact">Contact</NavLink>
          </li>
        </ul>
      </div>
    </nav>
  );
};

export default Navbar;

We have to generate menu contents with dummy.
This is simple template forHome.js Contact.js About.js below.

contact.js

import React from "react";

const Contact = (props) => {
  return (
    <div className="container">
      <h4 className="center">Contact</h4>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae velit
        maiores ratione nobis, consequuntur blanditiis sequi officia tempora
        adipisci necessitatibus modi beatae consequatur, deserunt aperiam
        dignissimos ea labore. Nemo, ducimus?
      </p>
    </div>
  );
};

export default Contact;

Let's back to App.js.
Below <Navbar />, add <Route path="/{~ Module Name ~}" component={~ Module ~} />, which is same as attribute to value in NavBar.js.

everything looks fine, but not working. Since our Home path is just /.
for working these, you should use exact path for the solution.

App.js

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Navbar />
          {/* <Route path="/" component={Home} /> this not working*/} 
          <Route exact path="/" component={Home} /> {/*this working!*/}
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </div>
      </BrowserRouter>
    );
  }
}

export default App;