DEV Community

loading...
Cover image for Quick start guide for react router v4 using create-react-app

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

nodefiend profile image chowderhead ・3 min read

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
Enter fullscreen mode Exit fullscreen mode

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';

Enter fullscreen mode Exit fullscreen mode

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>
    );
  }
}

Enter fullscreen mode Exit fullscreen mode

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>
     ...

Enter fullscreen mode Exit fullscreen mode

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>
    ...

Enter fullscreen mode Exit fullscreen mode

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>

}

Enter fullscreen mode Exit fullscreen mode

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>
)

Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Your app should look like this now:

alt text

References:

Happy Building!

Discussion (2)

Collapse
cutiko profile image
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

Collapse
nodefiend profile image
chowderhead Author

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...

Forem Open with the Forem app