Handling 404 errors

In notebook:
Building Modern Web Apps
Created at:
2016-02-02
Updated:
2016-02-02
Tags:
libraries JavaScript React jQuery
Provide a equivalent of 404 (on the client side)

you can add a ​'*'​ wildcard character to the routes
  // ****     router.js       ****
import ...
// ++++ 4. import messagepage component
import MessagePage from './pages/messagepage'

function requiresAuth(handlerName) {
    return function () {
        if(app.me.token) {
            this[handlername].apply(this, arguments)
        } else {
            this.redirectTo('/')
        }
    }
}

export default Router.extend({
    renderPage (page, opts = {layout:true}) { ... }
    
    routes: { 
        '': 'public',
        'repos': requiresAuth('repos'),
        'login': 'login',
        'logout': 'logout',
        'auth/callback?:query': requiresAuth('authCallback'),
        'repo/:owner/:name': 'repoDetail',
        // ++++ 1. add the wildcard route for 404
        '*fourOhfour': 'fourOhfour'

    },
    public () { ... },
    repos () { ... },

    repoDetail (owner, name) { ... }
    
    login () { ... },

    authCallback (query) { 
        query = qs.parse(query)
        console.log(query);
        xhr({
            url: 'https;//the-heroku-labelr-service-url' + query.code,
            json: true
        }, (err, req, body) => {
            console.log(body)
            app.me.token = body.token
            // ++++ 1. add the redirect
            this.redirectTo('/respos')
        })
        // ++++ 3. can display a message here too
        
        this.renderPage(<MessagePage title='Fetching your data' />)
        
    },
    
    logout () { ... },
    
    // ++++ 2. create the 404 route handler
    fourOhfour () {
        // just render anything
        // using the MessagePage component (to be created)
        this.renderPage(<MessagePage title='Not Found' body='sorry nothing here')
    }
    
})
Create the component MessagePage 
  // ****     pages/messagepage.js    ****

import React from 'react'

export default React.createClass({
    displayName: 'MessagePage',
    render () {
        return (
            <div>
                <h2>{this.props.title}</h2>
                <p>{this.props.body}</p>
            </div>
        )
    }
})
Audience question about Bootstrap Modal: since it's controlled by jquery - it doesn't work
But you could create a layout that creates the bootstrap modal html element