start playing with react router

package.json

@@ -5,10 +5,11 @@
     "lint": "tslint --project tslint.json",
     "package": "yarn build -- --config webpack.config.prod.js --bail --display-used-exports -p",
     "package-for-test": "yarn build -- --config webpack.config.test.js --bail --display-used-exports",
-    "watch": "yarn build -- --config webpack.config.js --colors --debug --output-pathinfo --progress --watch",
+    "watch": "yarn build -- --config webpack.config.js --colors --debug --output-pathinfo --progress --watch --env.WARN_ON_LINT",
     "build": "node ./node_modules/webpack/bin/webpack.js --cache=true --display-error-details --profile",
     "clean": "rm -rf ./dist/*",
-    "tsnode": "node -r ts-node/register -r tsconfig-paths/register"
+    "tsnode": "node -r ts-node/register -r tsconfig-paths/register",
+    "start:dev": "webpack-dev-server"
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",
@@ -25,6 +26,7 @@
     "@types/react-dom": "^16.0.11",
     "@types/react-measure": "^2.0.4",
     "@types/react-redux": "^6.0.12",
+    "@types/react-router-dom": "^4.3.1",
     "@types/react-window": "^1.1.0",
     "babel-loader": "^8.0.4",
     "babel-plugin-transform-builtin-extend": "^1.1.2",
@@ -61,6 +63,7 @@
     "typescript": "^3.2.2",
     "webpack": "^4.28.3",
     "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.14",
     "webpack-shell-plugin": "^0.5.0"
   },
   "dependencies": {
@@ -72,6 +75,7 @@
     "react-dom": "^16.7.0",
     "react-measure": "^2.2.2",
     "react-redux": "^6.0.0",
+    "react-router-dom": "^4.3.1",
     "react-window": "^1.5.0",
     "redux": "^4.0.1",
     "redux-thunk": "^2.3.0",

src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx

@@ -2,6 +2,7 @@ import POGOProtos from 'pogo-protos';
 
 import React from 'react';
 import { ContentRect, default as Measure } from 'react-measure';
+import { Link } from 'react-router-dom';
 import { VariableSizeList } from 'react-window';
 
 import classNames from 'classnames';
@@ -165,8 +166,15 @@ export class PokemonSelectList extends React.Component<IPokemonSelectListProps,
             styles.form
         );
         const onClick = () => this.props.handleActivatePokemon(pokemon.id, pokemon.form);
+        const linkTo = {
+            // pathname: '/courses',
+            search: `?id=${pokemon.id}`,
+            // hash: '#the-hash',
+            // state: { fromDashboard: true }
+        };
         return (
-            <a
+            <Link
+                to={ linkTo }
                 key={ this.getListItemKey(index) }
                 style={ style }
                 className={ anchorCss }
@@ -178,7 +186,7 @@ export class PokemonSelectList extends React.Component<IPokemonSelectListProps,
                 { pokemon.form !== POGOProtos.Enums.Form.FORM_UNSET &&
                     <span className={ formCss }>{ formatForm(pokemon.form) } Form</span>
                 }
-            </a>
+            </Link>
         );
     }
 

src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss

@@ -29,6 +29,8 @@
   }
 
   a {
+    color: inherit;
+    text-decoration: none;
     padding: 5px 1em 5px 2.25em;
     justify-content: flex-end;
     align-content: space-around;

src/ts/app/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
+import { BrowserRouter as Router, Route } from 'react-router-dom';
 import * as Redux from 'redux';
 import thunk from 'redux-thunk';
 
@@ -34,7 +35,12 @@ const store = Redux.createStore(
 
 ReactDOM.render(
     <Provider store={ store }>
-        <ConnectedPokemonApp />
+        <Router>
+            <div>
+                <Route exact={ true } path="/" component={ ConnectedPokemonApp } />
+                <Route path="/test" render={ () => <h1>hello</h1> } />
+            </div>
+        </Router>
     </Provider>,
     document.getElementById('pokemon-mount')
 );

webpack.config.js

@@ -32,6 +32,9 @@ module.exports = function (env) {
     ].concat(options.getPlugins(env));
 
     return {
+        devServer: {
+            historyApiFallback: true,
+        },
         entry: {
             'global': [
                 '@babel/polyfill', // this is intended to be on every single page, legacy or new!

webpack.config.prod.js

@@ -7,6 +7,7 @@ const StyleLintPlugin = require('stylelint-webpack-plugin');
 module.exports = function(env) {
     var generatedConfig = config(env, false);
 
+    delete generatedConfig.devServer;
     generatedConfig.mode = 'production';
     generatedConfig.plugins = [
         new webpack.LoaderOptionsPlugin({