Updated to the alpha version of router v4

package.json

@@ -13,7 +13,7 @@
     "react-lazy-load": "^3.0.10",
     "react-markdown": "^2.4.2",
     "react-redux": "^4.4.5",
-    "react-router": "^2.8.0",
+    "react-router": "^4.0.0-alpha.4",
     "react-timeago": "^3.1.3",
     "react-youtube": "^7.2.0",
     "redux": "^3.6.0",

src/App.js

@@ -2,21 +2,27 @@ import React from 'react';
 import { Link } from 'react-router'
 import logo from './logo.svg';
 import './App.css';
+import { BrowserRouter, Match } from 'react-router';
 
+import FrontPageContainer from './containers/FrontPageContainer.js';
+import SubredditPageContainer from './containers/SubredditPageContainer.js';
 import DefaultRedditsContainer from './containers/DefaultRedditsContainer.js'
 
 const App = (props) => (
-  <div className="App container-fluid">
-    <div className="App-reddit-selector">
-      <Link to="/">Front</Link> - <Link to="/r/all">All</Link> |
-      <DefaultRedditsContainer />
+  <BrowserRouter>
+    <div className="App container-fluid">
+      <div className="App-reddit-selector">
+        <Link to="/">Front</Link> - <Link to="/r/all">All</Link> |
+        <DefaultRedditsContainer />
+      </div>
+      <div className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <strong>Reactit!</strong> An Example ReactJs Reddit front-end
+      </div>
+      <Match exactly pattern="/" component={FrontPageContainer}/>
+      <Match exactly pattern="/r/:name" component={SubredditPageContainer} />
     </div>
-    <div className="App-header">
-      <img src={logo} className="App-logo" alt="logo" />
-      <strong>Reactit!</strong> An Example ReactJs Reddit front-end
-    </div>
-    {props.children}
-  </div>
+  </BrowserRouter>
 );
 
 export default App;

src/components/DefaultReddits.test.js

@@ -1,10 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import DefaultReddits from './DefaultReddits.js';
+import { MemoryRouter } from 'react-router';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
-  ReactDOM.render(<DefaultReddits reddit={{
-    display_name: 'foo',
-  }}/>, div);
+  ReactDOM.render(<MemoryRouter>
+      <DefaultReddits reddit={{
+      display_name: 'foo',
+    }}/>
+  </MemoryRouter>, div);
 });

src/components/ListingItem.test.js

@@ -1,13 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import ListingItem from './ListingItem.js';
+import { MemoryRouter } from 'react-router';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
-  ReactDOM.render(<ListingItem index={0} item={{
-    thumbnail: '',
-    created_utc: 0,
-    url: '',
-    title: '',
-  }}/>, div);
+  ReactDOM.render(<MemoryRouter>
+      <ListingItem index={0} item={{
+      thumbnail: '',
+      created_utc: 0,
+      url: '',
+      title: '',
+    }}/>
+  </MemoryRouter>, div);
 });

src/index.js

@@ -1,14 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Provider } from 'react-redux'
-import { Router, Route, browserHistory } from 'react-router'
+import { Provider } from 'react-redux';
 
 import App from './App';
 import './index.css';
 
-import FrontPageContainer from './containers/FrontPageContainer.js';
-import SubredditPageContainer from './containers/SubredditPageContainer.js';
-
 import { createStore, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
 
@@ -18,12 +14,7 @@ const store = createStore(subreddit, applyMiddleware(thunk));
 
 ReactDOM.render(
   <Provider store={store}>
-    <Router history={browserHistory}>
-      <Route component={App}>
-        <Route path="/" component={FrontPageContainer}/>
-        <Route path="/r/:name" component={SubredditPageContainer} />
-      </Route>
-    </Router>
+    <App/>
   </Provider>,
   document.getElementById('root')
 );