Adds example to show "page not found" implementation (#3251)

hegdeashwin · timdorr · commit 1a2798b5e43e · 2016-04-12T10:55:48.000-04:00
* Adds example to show "page not found" implementation * Fixes build #3263 failed
diff --git a/examples/index.html b/examples/index.html
@@ -17,5 +17,6 @@ <h1>React Router Examples</h1>
 <li><a href="passing-props-to-children">Passing Props to Children</a></li>
 <li><a href="pinterest">Pinterest-style UI (<code>location.state</code>)</a></li>
 <li><a href="query-params">Query Params</a></li>
+<li><a href="route-no-match">Route Not Found</a></li>
 <li><a href="sidebar">Sidebar</a></li>
 </ul>
diff --git a/examples/route-no-match/app.js b/examples/route-no-match/app.js
@@ -0,0 +1,53 @@
+import React from 'react'
+import { render } from 'react-dom'
+import { browserHistory, Router, Route, Link } from 'react-router'
+
+class User extends React.Component {
+  render() {
+    let { userID } = this.props.params
+    let { query } = this.props.location
+    let age = query && query.showAge ? '33' : ''
+
+    return (
+      <div className="User">
+        <h1>User id: {userID}</h1>
+        {age}
+      </div>
+    )
+  }
+}
+
+class App extends React.Component {
+  render() {
+    return (
+      <div>
+        <ul>
+          <li><Link to="/user/bob" activeClassName="active">Bob</Link></li>
+          <li><Link to={{ pathname: '/user/bob', query: { showAge: true } }} activeClassName="active">Bob With Query Params</Link></li>
+          <li><Link to="/user/sally" activeClassName="active">Sally</Link></li>
+        </ul>
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+class PageNotFound extends React.Component {
+  render() {
+    return (
+      <div>
+        <h1>Page Not Found.</h1>
+        <p>Go to <Link to="/">Home Page</Link></p>
+      </div>
+    )
+  }
+}
+
+render((
+  <Router history={browserHistory}>
+    <Route path="/" component={App}>
+      <Route path="user/:userID" component={User} />
+    </Route>
+    <Route path="*" component={PageNotFound} />
+  </Router>
+), document.getElementById('example'))
diff --git a/examples/route-no-match/index.html b/examples/route-no-match/index.html
@@ -0,0 +1,9 @@
+<!doctype html public "restroom">
+<title>Route Not Found Example</title>
+<base href="/route-no-match"/>
+<link href="/global.css" rel="stylesheet"/>
+<body>
+<h1 class="breadcrumbs"><a href="/">React Router Examples</a> / Route Not Found</h1>
+<div id="example"/>
+<script src="/__build__/shared.js"></script>
+<script src="/__build__/route-no-match.js"></script>
