Handling 404 errors
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 workBut you could create a layout that creates the bootstrap modal html element