React Router Basics: Part 1

React Router is a router library for React. Learn more at https://github.com/rackt/react-router

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

HTML

<!DOCTYPE html>
<html>
<head>
<script src=”//fb.me/react-with-addons-0.14.3.js”></script>
<script src=”//fb.me/react-dom-0.14.3.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/react-router/1.0.3/ReactRouter.min.js"></script>
<meta charset=”utf-8">
<title>JS Bin</title>
</head>
<body>
<main id=”app”></main>
</body>
</html>

CSS

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

JS

Finished example: http://output.jsbin.com/tuniwaq

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.