React Routing

React Routing

by AndrewBuntsev

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/5.0.0/react-router-dom.min.js"></script>
<div id="app"></div>

CSS

body {
  background: #f3f3f3;
  font-family: "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
    "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

section {
  padding: 1em 1em 0 2em;
}

section h2 {
  color: #2d2d2d;
  font-size: 2em;
  display: block;
  margin-top: 50px;
}

section p {
  margin-top: 1.5em;
  font-size: 1.5em;
  color: #2d2d2d;
  display: block;
}

.nav {
  font-size: 1em;
  min-height: 4em;
  position: fixed;
  top: 0;
  align-items: center;
  overflow: hidden;
  width: 100%;
  margin-top: 0;
}

.logo {
  margin: auto;
  text-align: center;
  margin-top: 4em;
}

.nav ul {
  float: right;
  list-style-type: none;
  margin: 0;
  margin-right: 10px;
  padding: 0;
  display: block;
}

.nav ul li {
  display: inline;
  padding: 1em;
  font-size: 1em;
}

.nav a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  vertical-align: middle;
  line-height: 4em;
  text-transform: uppercase;
}

.nav .active {
  --font-size: 1.2em;
  --font-weight: 700;
  border-bottom: 2px solid #ffffff;
}

.nav a:hover {
  color: #000000;
}

.nav {
  background-color: #008200;
}

React

const { BrowserRouter, Route, NavLink } = ReactRouterDOM;
const { Component } = React;

class Navigation extends Component {
  render() {
    return (
      <ul>
        <li>
          <NavLink exact to="/" activeClassName="active">
            About
          </NavLink>
        </li>
        <li>
          <NavLink exact to="/users" activeClassName="active">
            Users
          </NavLink>
        </li>
        <li>
          <NavLink to="/tasks" activeClassName="active">
            Tasks
          </NavLink>
        </li>
      </ul>
    );
  }
}

const About = () => 
      <section>
        <h2>About</h2>
        <p>The about section is supposed to be something about the section..</p>
       </section>
    ;

const Users = () => 
      <section>
        <h2>Users</h2>
        <ul>
          <li>Adam Battler</li>
          <li>Vlad Martinos</li>
          <li>John Carpenter</li>
          <li>Heleh Bergozza</li>
        </ul>
       </section>
    ;

const Tasks = () => 
      <section>
        <h2>Tasks</h2>
        <ol>
          <li>Some task #1</li>
          <li>Some task #2</li>
          <li>Some task #3</li>
          <li>Some task #4</li>
        </ol>
       </section>
    ;



ReactDOM.render(
  <BrowserRouter>
    <div>
        <nav className="nav" id="nav" role="navigation">
          <Navigation />
        </nav>
        <Route exact path="/" component={About} />
        <Route exact path="/users" component={Users} />
        <Route exact path="/tasks" component={Tasks} />
      </div>
  </BrowserRouter>, 
  document.querySelector("#app"))