From 518a95ee898ed42e14a50f90bd499cf0e1fda20a Mon Sep 17 00:00:00 2001
From: Sean Landsman <sean@thelandsmans.com>
Date: Tue, 16 Oct 2018 16:07:35 +0100
Subject: [PATCH] AG-2177 React Example - allow force refresh (routing breaks)

---
 config/webpack.config.examples.js                             | 1 +
 src-examples/App.jsx                                          | 2 +-
 src-examples/NavItem.jsx                                      | 4 ++--
 src-examples/index.html                                       | 4 ++++
 .../richGridDeclarativeExample/RichGridDeclarativeExample.jsx | 2 +-
 5 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/config/webpack.config.examples.js b/config/webpack.config.examples.js
index 563a35f..f8e7d1d 100644
--- a/config/webpack.config.examples.js
+++ b/config/webpack.config.examples.js
@@ -46,5 +46,6 @@ module.exports = {
     },
     devServer: {
         port: 8080,
+        historyApiFallback: true
     }
 };
\ No newline at end of file
diff --git a/src-examples/App.jsx b/src-examples/App.jsx
index 4207bf1..c6cc744 100644
--- a/src-examples/App.jsx
+++ b/src-examples/App.jsx
@@ -8,7 +8,7 @@ import SimpleReduxDynamicExample from "./simpleReduxDynamicComponentExample/Simp
 
 const SideBar = () => (
     <div style={{float: "left", width: 335, marginRight: 25}}>
-        <ul className="nav nav-pills nav-stacked">
+        <ul className="nav nav-pills">
             <NavItem to='/rich-grid-declarative'>Rich Grid with Declarative Markup</NavItem>
             <NavItem to='/simple-redux-dynamic'>Simple Redux Dynamic Component Example</NavItem>
         </ul>
diff --git a/src-examples/NavItem.jsx b/src-examples/NavItem.jsx
index f448d45..cde8fa0 100644
--- a/src-examples/NavItem.jsx
+++ b/src-examples/NavItem.jsx
@@ -6,8 +6,8 @@ import {Link, Route} from 'react-router-dom'
 export default function NavItem({children, to, exact}) {
     return (
         <Route path={to} exact={exact} children={({match}) => (
-            <li className={match ? 'active' : null}>
-                <Link to={to}>{children}</Link>
+            <li className="nav-item">
+                <Link className={match ? 'nav-link active' : 'nav-link'} to={to}>{children}</Link>
             </li>
         )}/>
     )
diff --git a/src-examples/index.html b/src-examples/index.html
index 1fd70e2..eaf33bd 100644
--- a/src-examples/index.html
+++ b/src-examples/index.html
@@ -16,6 +16,10 @@
             line-height: 1
         }
 
+        h1 {
+            font-size: 1.5rem;
+        }
+
         div.card-body > a {
             margin-top: 5px
         }
diff --git a/src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx b/src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx
index 7e9f58f..8e76dc6 100644
--- a/src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx
+++ b/src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx
@@ -232,7 +232,7 @@ export default class RichGridDeclarativeExample extends Component {
                             </AgGridColumn>
                         </AgGridReact>
                     </div>
-                    <div>
+                    <div style={{marginTop: 10}}>
                         <div className="row">
                             <div className="col-sm-12"><h1>Rich Grid with Declarative Markup Example</h1></div>
                         </div>