feat(examples): add nav bar

example/src/index.js

@@ -1,37 +1,59 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Switch, NavLink } from 'react-router-dom';
 
-import CustomNode from './CustomNode';
 import Rich from './Rich';
 import Basic from './Basic';
-import Empty from './Empty';
-import Inactive from './Inactive';
+import CustomNode from './CustomNode';
 import Stress from './Stress';
+import Inactive from './Inactive';
+import Empty from './Empty';
 
 import './index.css';
 
+const routes = [{
+  path: '/',
+  component: Rich,
+  label: 'Rich'
+}, {
+  path: '/basic',
+  component: Basic,
+  label: 'Basic'
+},{
+  path: '/custom-node',
+  component: CustomNode,
+  label: 'CustomNode'
+}, {
+  path: '/stress',
+  component: Stress,
+  label: 'StressTest'
+}, {
+  path: '/empty',
+  component: Empty
+},{
+  path: '/inactive',
+  component: Inactive
+}];
+
+const navLinks = routes.filter(route => route.label);
+
 ReactDOM.render((
-  <Router>
+  <Router forceRefresh={true}>
+    <header>
+      <div>React Flow Examples</div>
+      <nav>
+        {navLinks.map(route => (
+          <NavLink to={route.path} key={route.label} exact>
+            {route.label}
+          </NavLink>
+        ))}
+      </nav>
+    </header>
     <Switch>
-      <Route path="/basic">
-        <Basic />
-      </Route>
-      <Route path="/empty">
-        <Empty />
-      </Route>
-      <Route path="/inactive">
-        <Inactive />
-      </Route>
-      <Route path="/custom-node">
-        <CustomNode />
-      </Route>
-      <Route path="/stress">
-        <Stress />
-      </Route>
-      <Route path="/">
-        <Rich />
-      </Route>
+      {routes.map(route => (
+        <Route exact path={route.path} render={() => <route.component />} key={route.path} />
+      ))}
     </Switch>
   </Router>
 ), document.getElementById('root'));
+