Client: handling Link w/o page refresh

need to update "react-router-redux" to "^5.0.0-alpha.9" to avoid errors (undefined ConnectedRouter)
This commit is contained in:
SamR1 2017-12-17 14:33:04 +01:00
parent 115e999e48
commit 166cbd201a
5 changed files with 32 additions and 8 deletions

View File

@ -9332,9 +9332,14 @@
} }
}, },
"react-router-redux": { "react-router-redux": {
"version": "4.0.8", "version": "5.0.0-alpha.9",
"resolved": "https://registry.npmjs.org/react-router-redux/-/react-router-redux-4.0.8.tgz", "resolved": "https://registry.npmjs.org/react-router-redux/-/react-router-redux-5.0.0-alpha.9.tgz",
"integrity": "sha1-InQDWWtRUeGCN32rg1tdRfD4BU4=" "integrity": "sha512-euSgNIANnRXr4GydIuwA7RZCefrLQzIw5WdXspS8NPYbV+FxrKSS9MKG7U9vb6vsKHONnA4VxrVNWfnMUnUQAw==",
"requires": {
"history": "4.7.2",
"prop-types": "15.6.0",
"react-router": "4.2.0"
}
}, },
"react-scripts": { "react-scripts": {
"version": "1.0.17", "version": "1.0.17",

View File

@ -8,7 +8,7 @@
"react-dom": "^16.2.0", "react-dom": "^16.2.0",
"react-redux": "^5.0.6", "react-redux": "^5.0.6",
"react-router-dom": "^4.2.2", "react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8", "react-router-redux": "^5.0.0-alpha.9",
"react-scripts": "1.0.17", "react-scripts": "1.0.17",
"redux": "^3.7.2", "redux": "^3.7.2",
"redux-thunk": "^2.2.0" "redux-thunk": "^2.2.0"

View File

@ -1,4 +1,5 @@
import React from 'react' import React from 'react'
import { Link } from 'react-router-dom'
export default class NavBar extends React.Component { export default class NavBar extends React.Component {
constructor(props) { constructor(props) {
@ -26,7 +27,14 @@ export default class NavBar extends React.Component {
<div className="collapse navbar-collapse" id="navbarSupportedContent"> <div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto"> <ul className="navbar-nav mr-auto">
<li className="nav-item"> <li className="nav-item">
<a className="nav-link" href="/">Home</a> <Link
className="nav-link"
to={{
pathname: '/',
}}
>
Home
</Link>
</li> </li>
</ul> </ul>
</div> </div>

View File

@ -0,0 +1,11 @@
import React from 'react'
import { Provider } from 'react-redux'
import { ConnectedRouter } from 'react-router-redux'
export default function Root({ store, history, children }) {
return (
<Provider store={store}>
<ConnectedRouter history={history}>{children}</ConnectedRouter>
</Provider>
)
}

View File

@ -2,12 +2,12 @@
import { createBrowserHistory } from 'history' import { createBrowserHistory } from 'history'
import React from 'react' import React from 'react'
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { routerMiddleware } from 'react-router-redux' import { routerMiddleware } from 'react-router-redux'
import { applyMiddleware, createStore, compose } from 'redux' import { applyMiddleware, createStore, compose } from 'redux'
import thunk from 'redux-thunk' import thunk from 'redux-thunk'
import App from './components/App' import App from './components/App'
import Root from './components/Root'
import registerServiceWorker from './registerServiceWorker' import registerServiceWorker from './registerServiceWorker'
import reducers from './reducers' import reducers from './reducers'
@ -25,9 +25,9 @@ export const store = createStore(
) )
ReactDOM.render( ReactDOM.render(
<Provider store={store} history={history}> <Root store={store} history={history}>
<App /> <App />
</Provider>, </Root>,
rootNode rootNode
) )
registerServiceWorker() registerServiceWorker()