js_react__react-router-tuto.../lessons/03-navigating-with-link
2016-03-29 13:59:35 -04:00
..
modules Change tutorial structure to individual folders for each lesson 2016-03-08 10:08:54 -08:00
index.html Change tutorial structure to individual folders for each lesson 2016-03-08 10:08:54 -08:00
index.js Change tutorial structure to individual folders for each lesson 2016-03-08 10:08:54 -08:00
package.json Change tutorial structure to individual folders for each lesson 2016-03-08 10:08:54 -08:00
README.md Add #26 manually. 2016-03-29 13:59:35 -04:00
webpack.config.js Change tutorial structure to individual folders for each lesson 2016-03-08 10:08:54 -08:00

Navigating with Link

Perhaps the most used component in your app is Link. Its almost identical to the <a/> tag you're used to except that its aware of the Router it was rendered in.

Lets create some navigation in our App component.

// modules/App.js
import React from 'react'
import { Link } from 'react-router'

export default React.createClass({
  render() {
    return (
      <div>
        <h1>React Router Tutorial</h1>
        <ul role="nav">
          <li><Link to="/about">About</Link></li>
          <li><Link to="/repos">Repos</Link></li>
        </ul>
      </div>
    )
  }
})

Now visit http://localhost:8080 and click the links, click back, click forward. It works!


Next: Nested Routes