React Router DOM

Example of basic route switching with React Router DOM.

by Abdul Ahmad

HTML

<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
<script src="https://unpkg.com/prop-types/prop-types.min.js"></script>
<div id="app"></div>

CSS

body {
  font-family: Arial, Helvetica, sans-serif;
}

.navLinks {
  background: #333;
  list-style: none;
  margin: 0;
  padding: 1rem;
}

.navLinks li {
  display: inline-block;
}

.navLinks li a,
.navLinks li a:active, 
.navLinks li a:visited {
  color: #fff;
  padding: 1rem;
  text-decoration: none;
}

.navLinks li a.active {
  color: #999;
}

.navLinks li a:hover {
  text-decoration: underline;
}

.navLinks li a.active:hover {
  cursor: default;
  text-decoration: none;
}

form {
  margin-left: 1rem;
}

input, textarea, button {
  display: block;
}

input, textarea {
  margin-bottom: 1rem;
}

footer {
  background: #ccc;
  bottom: 0;
  color: #333;
  left: 0;
  position: absolute;
  text-align: center;
  width: 100%;
}

.heart {
  color: maroon;
  font-weight: bold;
}

Babel + JSX

const MOUNT_NODE = document.querySelector('#app');
const { BrowserRouter, Route, Switch, NavLink } = window.ReactRouterDOM;

const Home = () => {
  return <h1>Here we are at the home page.</h1>;
};

const AboutUs = () => {
  return <h1>Now we're here at the about us page.</h1>;
};

const Layout = ({children}) => {
  return (
    <div>
      <ul className='navLinks'>
        <li><NavLink to="/tophergates">Home</NavLink></li>
        <li><NavLink to="/about">About</NavLink></li>
      </ul>
      <main>{children}</main>
    </div>
  );
};

const App = () => {
  return (
    <BrowserRouter>
      <Layout>
        <Switch>
          <Route exact path='/' component={Home} />
  
          {/* these are needed for jsFiddle to render Home properly */}
          <Route path='/tophergates' component={Home} />
          <Route path='/_display/' component={Home} />
          
          <Route path='/about' component={AboutUs} />
        </Switch>
      </Layout>
    </BrowserRouter>
  );
};

// Render the application
ReactDOM.render(
	<App />, 
  MOUNT_NODE
);