[closes #10] - Added React Router

{{cookiecutter.project_slug}}/frontend/package.json

@@ -20,7 +20,9 @@
   "devDependencies": {
     "axios": "0.19.0",
     "node-sass": "4.12.0",
-    "raven-js": "3.27.2"
+    "raven-js": "3.27.2",
+    "react-document-title": "2.0.3",
+    "react-router-dom": "5.1.2"
   },
   "engines": {
     "node": ">=9.11.1",

{{cookiecutter.project_slug}}/frontend/src/App.js

@@ -3,22 +3,25 @@ import logo from './logo.svg'
 import './App.css'
 
 import axios from 'axios'
-
+import DocumentTitle from 'react-document-title'
 
 class App extends Component {
-  onClick = (e) => {
-    console.log("Sending a GET API Call !!!");
-    axios.get('/api/')
-    .then(res => {
-      console.log(res);
-    }).then(response => {
-      console.log(JSON.stringify(response));
-    })
+  onClick = e => {
+    console.log('Sending a GET API Call !!!')
+    axios
+      .get('/api/')
+      .then(res => {
+        console.log(res)
+      })
+      .then(response => {
+        console.log(JSON.stringify(response))
+      })
   }
 
   render() {
     return (
       <div className="App">
+        <DocumentTitle title="{{ cookiecutter.project_name }}" />
         <header className="App-header">
           <img src={logo} className="App-logo" alt="logo" />
           <h1 className="App-title">Welcome to React</h1>
@@ -26,11 +29,12 @@ class App extends Component {
         <p className="App-intro">
           To get started, edit <code>src/App.js</code> and save to reload.
         </p>
-        <button type="button" onClick={this.onClick}>Send API request</button>
+        <button type="button" onClick={this.onClick}>
+          Send API request
+        </button>
       </div>
     )
   }
 }
 
-
 export default App

{{cookiecutter.project_slug}}/frontend/src/index.js

@@ -1,22 +1,17 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import * as serviceWorker from './serviceWorker'
+
 import './index.css'
-import App from './App'
-import * as serviceWorker from './serviceWorker';
-
-import Raven from 'raven-js'
-
-
-if (process.env.NODE_ENV === 'production') {
-  Raven.config(process.env.REACT_APP_SENTRY_URL).install()
-}
+import Root from './root'
 
 const rootElement = document.getElementById('root')
 
-ReactDOM.render(<App />, rootElement)
-if (module.hot && process.env.NODE_ENV === "development") {
-  module.hot.accept('./App', () => {
-    const NextRoot = require('./App').default
+ReactDOM.render(<Root />, rootElement)
+
+if (module.hot && process.env.NODE_ENV === 'development') {
+  module.hot.accept('./root', () => {
+    const NextRoot = require('./root').default
     ReactDOM.render(<NextRoot />, rootElement)
   })
 }

{{cookiecutter.project_slug}}/frontend/src/root.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Router } from 'react-router-dom'
+import { createBrowserHistory as createHistory } from 'history'
+import Raven from 'raven-js'
+
+import Routes from './routes'
+
+if (process.env.NODE_ENV === 'production') {
+  Raven.config(process.env.REACT_APP_SENTRY_URL).install()
+}
+
+const history = createHistory()
+
+const Root = () => (
+  <Router history={history}>
+    <Routes />
+  </Router>
+)
+
+export default Root

{{cookiecutter.project_slug}}/frontend/src/routes.js

@@ -0,0 +1,14 @@
+import React, { Suspense } from 'react'
+import { Route, Switch } from 'react-router-dom'
+
+const App = React.lazy(() => import('./App'))
+
+const Routes = () => (
+  <Suspense fallback={<div>Loading...</div>}>
+    <Switch>
+      <Route path="/app/" component={App} />
+    </Switch>
+  </Suspense>
+)
+
+export default Routes