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

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

Happy Building!

Comments

[Erick Navarro]

For some reason, I'm stuck with this and can't figure it out. My problem is that when the route change, the whole page is reloaded. I try with Hashrouter instead, and that did work, but can't make it work with BrowserRouter

[chowderhead]

well we definitly don't want to trigger a page reload.

are you getting any errors in the console?

make sure to have routes clearly defined inside of app.js

make sure you are passing correct prop to Component for to

check out this post from tyler mginiss , might help, he goes in to more depth:

tylermcginnis.com/build-your-own-r...