diff --git a/configs/webpack/dev.js b/configs/webpack/dev.js index 716a5ae..fd9c520 100644 --- a/configs/webpack/dev.js +++ b/configs/webpack/dev.js @@ -13,6 +13,7 @@ module.exports = merge(commonConfig, { ], devServer: { hot: true, // enable HMR on the server + historyApiFallback: true, }, devtool: 'cheap-module-eval-source-map', plugins: [ diff --git a/package-lock.json b/package-lock.json index 02b4533..e5b8856 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6990,6 +6990,28 @@ "js-tokens": "^3.0.0" } }, + "history": { + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz", + "integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==", + "requires": { + "invariant": "^2.2.1", + "loose-envify": "^1.2.0", + "resolve-pathname": "^2.2.0", + "value-equal": "^0.4.0", + "warning": "^3.0.0" + }, + "dependencies": { + "warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", + "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", + "requires": { + "loose-envify": "^1.0.0" + } + } + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -7727,7 +7749,6 @@ "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", - "dev": true, "requires": { "loose-envify": "^1.0.0" } @@ -8375,8 +8396,7 @@ "js-tokens": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", - "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=", - "dev": true + "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=" }, "js-yaml": { "version": "3.7.0", @@ -8994,7 +9014,6 @@ "version": "1.3.1", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz", "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=", - "dev": true, "requires": { "js-tokens": "^3.0.0" } @@ -10293,8 +10312,7 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", - "dev": true + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" }, "object-copy": { "version": "0.1.0", @@ -12332,7 +12350,6 @@ "version": "15.6.2", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz", "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==", - "dev": true, "requires": { "loose-envify": "^1.3.1", "object-assign": "^4.1.1" @@ -12663,6 +12680,48 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "react-router": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz", + "integrity": "sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==", + "requires": { + "history": "^4.7.2", + "hoist-non-react-statics": "^2.5.0", + "invariant": "^2.2.4", + "loose-envify": "^1.3.1", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.1", + "warning": "^4.0.1" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + }, + "path-to-regexp": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz", + "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=", + "requires": { + "isarray": "0.0.1" + } + } + } + }, + "react-router-dom": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.3.1.tgz", + "integrity": "sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==", + "requires": { + "history": "^4.7.2", + "invariant": "^2.2.4", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.1", + "react-router": "^4.3.1", + "warning": "^4.0.1" + } + }, "read-all-stream": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/read-all-stream/-/read-all-stream-3.1.0.tgz", @@ -13187,6 +13246,11 @@ "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", "dev": true }, + "resolve-pathname": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz", + "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg==" + }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -16433,6 +16497,11 @@ "spdx-expression-parse": "^3.0.0" } }, + "value-equal": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz", + "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw==" + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", @@ -16576,6 +16645,14 @@ "wrap-fn": "^0.1.0" } }, + "warning": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.1.tgz", + "integrity": "sha512-rAVtTNZw+cQPjvGp1ox0XC5Q2IBFyqoqh+QII4J/oguyu83Bax1apbo2eqB8bHRS+fqYUBagys6lqUoVwKSmXQ==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watchpack": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz", diff --git a/package.json b/package.json index 218ffde..2902ab4 100644 --- a/package.json +++ b/package.json @@ -83,7 +83,9 @@ "axios": "^0.18.0", "mobx": "^5.0.3", "mobx-react": "^5.2.3", - "normalize.css": "^8.0.0" + "normalize.css": "^8.0.0", + "react-router": "^4.3.1", + "react-router-dom": "^4.3.1" }, "postcss": {} } diff --git a/src/components/NotFoundPage/NotFoundPage.scss b/src/components/NotFoundPage/NotFoundPage.scss new file mode 100644 index 0000000..0e8db32 --- /dev/null +++ b/src/components/NotFoundPage/NotFoundPage.scss @@ -0,0 +1,6 @@ +.not-found-page { + text-align: center; + margin-top: 30vh; + font-size: 4rem; + font-weight: 200; +} diff --git a/src/components/NotFoundPage/NotFoundPage.tsx b/src/components/NotFoundPage/NotFoundPage.tsx new file mode 100644 index 0000000..a559d2c --- /dev/null +++ b/src/components/NotFoundPage/NotFoundPage.tsx @@ -0,0 +1,16 @@ +import * as React from "react"; +import "./NotFoundPage.scss"; + +export interface NotFoundPageProps {} + + class NotFoundPage extends React.Component { + render() { + return ( +
+ 404 | Ei vaan löydy +
+ ); + } +} + +export default NotFoundPage; diff --git a/src/components/NotFoundPage/index.ts b/src/components/NotFoundPage/index.ts new file mode 100644 index 0000000..4be9bb0 --- /dev/null +++ b/src/components/NotFoundPage/index.ts @@ -0,0 +1,2 @@ +import NotFoundPage from "./NotFoundPage"; +export default NotFoundPage; diff --git a/src/index.tsx b/src/index.tsx index 07b2f4f..6099631 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,7 +1,8 @@ import * as React from "react"; import {render} from "react-dom"; +import { BrowserRouter } from "react-router-dom"; import {AppContainer} from "react-hot-loader"; -import App from "./components/App"; +import Routes from "./routes"; import "normalize.css"; import "./index.scss"; @@ -9,7 +10,9 @@ const rootEl = document.getElementById("root"); render( - + + + , rootEl ); @@ -18,12 +21,14 @@ render( declare const module: { hot: any }; if (module.hot) { - module.hot.accept("./components/App", () => { - const NewApp = require("./components/App").default; + module.hot.accept("./routes", () => { + const NewRoutes = require("./routes").default; render( - + + + , rootEl ); diff --git a/src/routes.tsx b/src/routes.tsx new file mode 100644 index 0000000..28e51ba --- /dev/null +++ b/src/routes.tsx @@ -0,0 +1,11 @@ +import * as React from "react"; +import { Switch, Route } from "react-router-dom"; +import App from "./components/App"; +import NotFoundPage from "./components/NotFoundPage"; + +export default () => ( + + + + +);