React Router Basics: Part 1

React Router is a router library for React. Learn more at

Main React Router components

Link (ReactRouter.Link)
Used like a anchor tag to link to other pages. Pass path string to to prop to specify the page.

Route (ReactRouter.Route)
Used to assign routes to pages. Can be nested, to wrap Parent components into Child components. Pass a string for the path to path prop and React Page component to component.

Route (ReactRouter.IndexRoute)
Used to specify index page of Parent Component route. Only has component path.

Router (ReactRouter.Router)
Global React component, that wraps around all of your routes. I pass Routes to routes prop. Then i render the entire app with ReactDOM.

Example Code


<!DOCTYPE html>
<script src=”//”></script>
<script src=”//”></script>
<script src=”"></script>
<meta charset=”utf-8">
<title>JS Bin</title>
<main id=”app”></main>


body {
font-family: arial, sans-serif;
nav ul {
list-style: none;
padding-left: 0;
nav li {
display: inline-block;
nav a {
text-decoration: none;
main {
width: 100%;
max-width: 764px;
margin: auto;
footer {
text-align: center;


Finished example: