diff --git a/package.json b/package.json index 05e15c7..9ff2617 100644 --- a/package.json +++ b/package.json @@ -99,14 +99,15 @@ "isomorphic-fetch": "^2.2.1", "join-classnames": "^1.0.0", "npm-run-all": "^4.0.1", - "react": "^15.0.1", - "react-dom": "^15.0.1", + "react": "^15.6.1", + "react-dom": "^15.6.1", "react-helmet": "^5.0.3", "react-redux": "^5.0.2", - "react-router": "^3.0.2", + "react-router": "^4.1.1", + "react-router-dom": "^4.1.1", "react-router-redux": "^4.0.7", "redux": "^3.4.0", "redux-thunk": "^2.0.1", "string-hash": "^1.1.0" } -} \ No newline at end of file +} diff --git a/src/app/_client.js b/src/app/_client.js index 85759c2..bb9705b 100644 --- a/src/app/_client.js +++ b/src/app/_client.js @@ -1,6 +1,5 @@ -import { Router, browserHistory } from 'react-router'; -import { syncHistoryWithStore } from 'react-router-redux'; import React from 'react'; +import { BrowserRouter } from 'react-router-dom'; import {render} from 'react-dom'; import {Provider} from 'react-redux'; @@ -8,11 +7,12 @@ import routes from './routes.js'; import getStore from './store.js'; const store = getStore(); -const history = syncHistoryWithStore(browserHistory, store) render( - + + {routes} + , document.getElementById('app') diff --git a/src/app/_server.js b/src/app/_server.js index 85fb90a..77285a8 100644 --- a/src/app/_server.js +++ b/src/app/_server.js @@ -1,59 +1,85 @@ import React from 'react'; import docTemplate from './HTML.js'; import { renderToString } from 'react-dom/server'; -import { match, RouterContext } from 'react-router'; +import { StaticRouter } from 'react-router'; import { Provider } from 'react-redux'; import Helmet from 'react-helmet'; import {encode} from '@tuxsudo/b64'; import routes from './routes.js'; import getStore from './store.js'; import { minify } from 'html-minifier'; -import { resolve } from './hocs/ss-resolve'; +// import { resolve } from './hocs/ss-resolve'; import {selectHTTPResponseCode} from './store.js'; import * as env from './env.js'; export default (req, res, next) => { - match({ routes, location: req.url }, (err, redirect, props) => { - - if (err) { - return next(err); - - } else if (redirect) { - res.redirect(redirect.pathname + redirect.search) - - } else if (props) { - const store = getStore(); - - resolve(props, store) - .then(() => { - const initialState = store.getState(); - const httpStatus = selectHTTPResponseCode(initialState); - const opaqueStateString = encode(JSON.stringify(initialState)); - - const content = renderToString( - - - - ); - - res.status(httpStatus).send( - minify( - docTemplate({ - ...(Helmet.rewind()), - content, - initialState: opaqueStateString, - env, - base_path: env.APP_WEB_BASE_PATH - }), - { collapseWhitespace: true, removeAttributeQuotes: true } - ) - ); - }).catch(next); - - } else { - res.status(404).send('Not Found') - } - }) + const store = getStore(); + + const content = renderToString( + + + {routes} + + + ) + + const initialState = store.getState(); + const httpStatus = selectHTTPResponseCode(initialState); + const opaqueStateString = encode(JSON.stringify(initialState)); + + res.status(httpStatus).send( + minify( + docTemplate({ + ...(Helmet.rewind()), + content, + initialState: opaqueStateString, + env, + base_path: env.APP_WEB_BASE_PATH + }), + { collapseWhitespace: true, removeAttributeQuotes: true } + ) + ); + // match({ routes, location: req.url }, (err, redirect, props) => { + + // if (err) { + // return next(err); + + // } else if (redirect) { + // res.redirect(redirect.pathname + redirect.search) + + // } else if (props) { + // const store = getStore(); + + // resolve(props, store) + // .then(() => { + // const initialState = store.getState(); + // const httpStatus = selectHTTPResponseCode(initialState); + // const opaqueStateString = encode(JSON.stringify(initialState)); + + // const content = renderToString( + // + // + // + // ); + + // res.status(httpStatus).send( + // minify( + // docTemplate({ + // ...(Helmet.rewind()), + // content, + // initialState: opaqueStateString, + // env, + // base_path: env.APP_WEB_BASE_PATH + // }), + // { collapseWhitespace: true, removeAttributeQuotes: true } + // ) + // ); + // }).catch(next); + + // } else { + // res.status(404).send('Not Found') + // } + // }) } diff --git a/src/app/components/SiteHeader/SiteHeader.js b/src/app/components/SiteHeader/SiteHeader.js index eb25f95..fb60873 100644 --- a/src/app/components/SiteHeader/SiteHeader.js +++ b/src/app/components/SiteHeader/SiteHeader.js @@ -3,14 +3,14 @@ import style from './SiteHeader.css'; import SiteNav from '../SiteNav/SiteNav'; import classes from 'join-classnames'; import logo from './logo-placeholder.svg'; -import {IndexLink} from 'react-router'; +import {Link} from 'react-router-dom'; export default ({homelink="/", links = [], className=""}) => (
- + My Brand React Starter - +
); diff --git a/src/app/components/SiteNav/SiteNav.js b/src/app/components/SiteNav/SiteNav.js index 3610b04..864bf25 100644 --- a/src/app/components/SiteNav/SiteNav.js +++ b/src/app/components/SiteNav/SiteNav.js @@ -1,6 +1,6 @@ import React from 'react'; import styles from './SiteNav.css'; -import { Link } from 'react-router'; +import { Link } from 'react-router-dom'; import classes from 'join-classnames'; export default ({links=[], className=""}) => ( diff --git a/src/app/routes.js b/src/app/routes.js index 1c9dfaa..567f9b3 100644 --- a/src/app/routes.js +++ b/src/app/routes.js @@ -1,15 +1,20 @@ import React from 'react'; -import { Route, IndexRoute } from 'react-router'; +import { Route, Switch } from 'react-router-dom'; import App from './containers/app.js'; import Home from './containers/home.js'; import NotFound from './containers/not-found.js'; import {APP_WEB_BASE_PATH} from './env.js'; const routes = ( - - - - + ( + + + + + )} + /> ); export default routes;