Update README.md

trendmicro-frontend · Jan 19, 2018 · 45e9897 · 45e9897
1 parent 62a47af
commit 45e9897
Showing 1 changed file with 45 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -63,6 +63,51 @@ Demo: https://trendmicro-frontend.github.io/react-sidenav
 </SideNav>
 ```
 
+## React Router v4 with React v16
+
+```jsx
+<Router>
+    <Route render={({ location, history }) => (
+        <React.Fragment>
+            <SideNav
+                onSelect={(selected) => {
+                    const to = '/' + selected;
+                    if (location.pathname !== to) {
+                        history.push(to);
+                    }
+                }}
+            >
+                <SideNav.Toggle />
+                <SideNav.Nav defaultSelected="home">
+                    <NavItem eventKey="home">
+                        <NavIcon>
+                            <i className="fa fa-fw fa-home" style={{ fontSize: '1.75em' }} />
+                        </NavIcon>
+                        <NavText>
+                            Home
+                        </NavText>
+                    </NavItem>
+                    <NavItem eventKey="devices">
+                        <NavIcon>
+                            <i className="fa fa-fw fa-device" style={{ fontSize: '1.75em' }} />
+                        </NavIcon>
+                        <NavText>
+                            Devices
+                        </NavText>
+                    </NavItem>
+                </SideNav.Nav>
+            </SideNav>
+            <main>
+                <Route path="/" exact component={props => <RootComponent />} />
+                <Route path="/home" component={props => <Home />} />
+                <Route path="/devices" component={props => <Devices />} />
+            </main>
+        </React.Fragment>
+    )}
+    />
+</Router>
+```
+
 ## API
 
 ### Properties