The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Building a React.js App: Basic Routing with React Router

Building a React.js App: Basic Routing with React Router

10:34
React Router is the most popular, and arguably the best solution for adding Routing to your React application. In this video, we’ll talk about the ideology around React Router as well as set up basic routing for our application.
Watch this lesson now
Avatar
egghead.io

React Router is the most popular, and arguably the best solution for adding Routing to your React application. In this video, we’ll talk about the ideology around React Router as well as set up basic routing for our application.

Avatar
Simon

I was wondering if anyone has an idea or a link on animating these route transitions, eg instead of showing the next page immediately , so how fade the current then fade in the new view? I have looked at adding removing classes on the main views, using componentWillMount etc. but this does not work, its not like activating the transition but showing imediatley etc, thanks

Avatar
Tyler

Simon. I believe React Router 1.0 is going to add route change animations. They're a beta branch right now that you can checkout.

In reply to Simon
Avatar
Ashwin

What text editor are you using here?

Avatar
Tyler

Hi Ashwin, I'm using Sublime. All my settings can be found in this tweet. https://twitter.com/tylermcginnis33/status/610920794189889536

In reply to Ashwin
Avatar
egghead.io

The lesson video has been updated!

Avatar
KKD

Trying to run webpack -w and I am getting:

"Module build failed: ReferenceError: [BABEL] /home/karan/projects/react-tutorial/app/App.js: Unknown option: direct.presets".

My webpack.config.js looks like the following:

module.exports = {
    entry: "./app/App.js",
    output: {
        filename: "public/bundle.js"
    },
    module:{
        loaders:[
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['react', 'es2015']
                }
            }
        ]
    }
};

My package.json:

{
  "name": "react-tutorial",
  "version": "1.0.0",
  "description": "react tutorial",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "history": "^1.13.1",
    "react-dom": "^0.14.0",
    "react-router": "^1.0.1"
  },
  "devDependencies": {
    "babel-core": "^5.8.30",
    "babel-loader": "^5.3.2",
    "webpack": "^1.12.9"
  }
}

and I have no clue what I am doing wrong. I am not sure if I have the wrong version of any of the package described :(

Avatar
Joel

both the webpack config and package.json are provided in the lesson source. Have you compared with that?

In reply to KKD
Avatar
KKD

oh god, in routes.js, the problem was that I was using curly brace {} in module.exports instead of parenthesis (). noob alert!

In reply to Joel
Avatar
Maximilian Patan

This may be explained later on but I decided to name my component main instead of 'Main'. So...

var main = React.createClass...
...
ReactDOM.render(<main/>, ...

This did not work. Had to use the upper case M. Why is that?

Avatar
Maximilian Patan

Interesting - thanks Joel.

In reply to Joel
Avatar
Daniel

Just in-case anyone gets stuck like I did. I was receiving an error in the dev console stating "React.createElement: type should not be null, undefined, booolean, or number".

The issue is in the way we instantiate our react-router. Instead of var Route = Router.route, I needed to either use import { Route } from 'react-router' or var Route = require('react-router').Route. I was then able to view pages correctly.

Avatar
fannarx

(y)
Worked for me.

In reply to Daniel
Avatar
Sky

If you are following along and are having issues, make sure that you are exporting Home.js (it took me too long to realize that was my issue!)

Avatar
Marciano

Hi there,

I'm running against problems with React-router. Not sure why exactly. But this is the warning I get: Warning: [react-router]Routerno longer defaults the history prop to hash history. Please use thehashHistorysingleton instead. http://tiny.cc/router-defaulthistory

I'm not sure what to do about this. I checked out this url: https://github.com/rackt/react-router/blob/master/upgrade-guides/v2.0.0.md

But this doesn't help me to get along.
Does anyone know what I need to do?

Thanks.

Avatar
Tyler

Hi Marciano,

You probably downloaded the latest Router and not the one downloaded in the video. With React Router 2.0 they, as the error mentioned, no longer use hashHistory by default when they instantiate the Router. Basically that means
<Router>

becomes

{ hashHistory } from 'react-router'
<Router history={hashHistory} />

see more here https://github.com/rackt/react-router/blob/master/upgrade-guides/v2.0.0.md#no-default-history

In reply to Marciano
Avatar
Gee Jay Almestas

Hi, i'm kind of confuse when i tried to view the index.html i didn't see anything, it doesn't gives me an error in the console also even doing webpack -w everything is fine... can you guys look at my files if i did something wrong?

here's my git files https://jigsgfx@bitbucket.org/jigsgfx/egghead-react.git

do you think is it because i don't have a package.json? why because when i install the package it didn't gives a package.json

EDIT:
ok my bad i did a typo error on routes.js

what i did is instead of "component" i made it "componnent" with double "n" :D

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?