Lets jump right into this:

For the sake of brevity, i'm going to build all pieces of this into app.js , but naturally you'll want to separate them.

npm install create-react-app /folder-location-of-my-app

navigate into the folder and install react-router-dom into your package.json

cd ./folder-location-of-my-app

npm install --save react-router-dom

now that you have react router dom lets open up the default app.js file:

app.js

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

go down to the render function and and wrap the outer most div in a <Router>:


class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <header className="App-header">
            ...
        </div>
      </Router>
    );
  }
}

OKay great now that we have the Router in place, lets define Simple Routes:

react router will render our component views in the JSX wherever you decide to place them.

lets place them below the header


        ...
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Welcome to React</h1>
          </header>
          <div>
            <Route exact path="/" component={Home} />
            <Route exact path="/about" component={About} />
            <Route exact path="/code" component={Code} />
            <Route exact path="/contact" component={Contact} />
            <Route exact path="/presence" component={info} />
          </div>
        </div>
      </Router>
     ...

Pass in a string of the exact path that you want to route to, and pass in a component to set up each route.

Now that we have routes set up , we need to set up buttons that will 'link' to each route.

lets create a pure function component and name it <MainMenu/>

we can add our menu buttons into the header so they are nice and obvious:

    ...
     <header className="App-header">
       <img src={logo} className="App-logo" alt="logo" />
         <h1 className="App-title">Welcome to React</h1>
            <MainMenu/>
     </header>
    ...

our <MainMenu/> component will consist of a series of buttons wrapped by react-routers <Link/> component, this turns its children into a link that will change react routers 'state' based on what you pass in with the to= prop.


const MainMenu = () => {

    <div>
      <Link to="/">
        <button>home</button>
      </Link>
      <Link to="/about">
        <button>About</button>
      </Link>
      <Link to="/code">
        <button>code</button>
      </Link>
      <Link to="/code">
        <button>contact</button>
      </Link>
      <Link to="/info">
        <button>info</button>
      </Link>
    </div>

}

Great ! Now that we have our <Router/> , <Route/> and <Link/> in place, the only thing left to do is set up each one of our views:

We can quickly set those up with some more pure functions


const Home = () => (
  <div>
    Home
  </div>
)

Now our full app.js file will look like this:


    import React, { Component } from 'react';
    import logo from './logo.svg';
    import './App.css';
    import { BrowserRouter as Router, Route, Link } from 'react-router-dom';


    const Home = () => (
      <div>
        Home
      </div>
    )

    const About = () => (
      <div>
        About
      </div>
    )

    const Code = () => (
      <div>
        Code
      </div>
    )

    const Contact = () => (
      <div>
        Contact
      </div>
    )

    const info = () => (
      <div>
        info
      </div>
    )

const MainMenu = () => {
  return (
    <div>
      <Link to="/">
        <button>home</button>
      </Link>
      <Link to="/about">
        <button>About</button>
      </Link>
      <Link to="/code">
        <button>code</button>
      </Link>
      <Link to="/contact">
        <button>contact</button>
      </Link>
      <Link to="/info">
        <button>info</button>
      </Link>
    </div>
  );
};

    class App extends Component {
      render() {
        return (
          <Router>
            <div className="App">
              <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <h1 className="App-title">Welcome to React</h1>
                <MainMenu />
              </header>
              <div>
                <Route exact path="/" component={AppViews.Home} />
                <Route exact path="/about" component={AppViews.About} />
                <Route exact path="/code" component={AppViews.Code} />
                <Route exact path="/contact" component={AppViews.Contact} />
                <Route exact path="/presence" component={AppViews.Presence} />
              </div>
            </div>
          </Router>
        );
      }
    }

    export default App;

Your app should look like this now:

References:

react-router-docs

Blog

Quick start guide for react router v4 using create-react-app

chowderhead

Lets jump right into this:

app.js

Happy Building!

Join Our Newsletter. No Spam, Only the good stuff.

Related