React Router DOM

Example of basic route switching with React Router DOM.

by michae1

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

// Select the node we wish to mount our React application to
const MOUNT_NODE = document.querySelector('#app');

// Grab components out of the ReactRouterDOM that we will be using
const { BrowserRouter, Route, Switch, NavLink } = window.ReactRouterDOM;

// PropTypes is used for typechecking
const PropTypes = window.PropTypes;

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

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

// TodoList page component
const TodoList = () => {
  // Prevent form submit
  const handleSubmit = (e) => {
    e.preventDefault();
    return false;
  };
  
  return (
  	<div>
  	  <h1>TodoList</h1>
  	</div>
  );
};
const TodoCreate = () => {
  // Prevent form submit
  const handleSubmit = (e) => {
    e.preventDefault();
    return false;
  };
  
  return (
  	<div>
  	  <h1>TodoCreate</h1>
  	</div>
  );
};
const TodoEdit = () => {
  // Prevent form submit
  const handleSubmit = (e) => {
    e.preventDefault();
    return false;
  };
  
  return (
  	<div>
  	  <h1>TodoEdit</h1>
  	</div>
  );
};

// NotFoundPage component
// props.match.url contains the current url route
const NotFoundPage = ({ match }) => {
	const {url} = match;
  
	return (
  	<div>
  	  <h1>Whoops!</h1>
      <p><strong>{url.replace('/','')}</strong> could not be located.</p>
    </div>
 	);
};

// Header component is our page title and navigation menu
const Header = () => {
	// This is just needed to set the Home route to active 
  // in jsFiddle based on the URI location. Ignore.
	const checkActive = (match, location) => {
  	if(!location) return false;
    const {pathname} = location;
    
    return pathname.indexOf('/tophergates') !== -1 || pathname.indexOf('/_display/') !== -1;
  }
  
  return (
    <header>
      <h1>Basic React Routing</h1>
      <nav>
        <ul className='navLinks'>
          {/* Your home route path would generally just be '/'' */}
...