failed attempt at setting up connected router

This commit is contained in:
Sanjay Bhangar 2018-12-08 18:01:20 +02:00
parent 7d8778b51c
commit ee15c0150d
7 changed files with 50 additions and 19 deletions

View File

@ -3,6 +3,8 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"connected-react-router": "^5.0.1",
"history": "^4.7.2",
"prop-types": "^15.6.2", "prop-types": "^15.6.2",
"react": "^16.6.3", "react": "^16.6.3",
"react-css-grid": "^2.0.0-0", "react-css-grid": "^2.0.0-0",

View File

@ -1,10 +1,12 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Provider} from 'react-redux'; import {Provider} from 'react-redux';
import { ConnectedRouter } from 'connected-react-router'
import './App.css'; import './App.css';
import {Route} from 'react-router-dom'; import { Route, Switch } from 'react-router-dom';
import Home from './containers/Home'; import Home from './containers/Home';
import TopicsList from './containers/TopicsList'; import TopicsList from './containers/TopicsList';
import store from './store/configureStore'; import store from './store/configureStore';
import history from './history';
import Header from "./components/Header"; import Header from "./components/Header";
import Footer from "./components/Footer"; import Footer from "./components/Footer";
import Search from "./components/Search"; import Search from "./components/Search";
@ -13,18 +15,23 @@ import Video from "./containers/Video";
class App extends Component { class App extends Component {
render() { render() {
console.log('store', history, store);
return ( return (
<Provider store={store}> <Provider store={store}>
<ConnectedRouter history={ history }>
<div className="App"> <div className="App">
<Header/> <Header/>
<Search/> <Search/>
<Switch>
<Route exact={true} path="/" component={Home}/> <Route exact={true} path="/" component={Home}/>
<Route path="/topics" component={TopicsList}/> <Route path="/topics" component={TopicsList}/>
<Route path="/videos/:videoId" component={Video}/> <Route path="/videos/:videoId" component={Video}/>
</Switch>
<Nav/> <Nav/>
<Footer/> <Footer/>
</div> </div>
</ConnectedRouter>
</Provider> </Provider>
); );
} }

5
src/history.js Normal file
View File

@ -0,0 +1,5 @@
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
export default history;

View File

@ -3,12 +3,9 @@ import ReactDOM from 'react-dom';
import './index.css'; import './index.css';
import App from './App'; import App from './App';
import * as serviceWorker from './serviceWorker'; import * as serviceWorker from './serviceWorker';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render( ReactDOM.render(
<BrowserRouter> <App />,
<App />
</BrowserRouter>,
document.getElementById('root') document.getElementById('root')
); );

View File

@ -2,10 +2,10 @@ import { combineReducers } from 'redux';
import TopicsReducer from './topics'; import TopicsReducer from './topics';
import VideosReducer from './videos'; import VideosReducer from './videos';
import { connectRouter } from 'connected-react-router'
const rootReducer = combineReducers({ export default (history) => combineReducers({
router: connectRouter(history),
topics: TopicsReducer, topics: TopicsReducer,
videos: VideosReducer videos: VideosReducer
}); });
export default rootReducer;

View File

@ -1,5 +1,7 @@
import { createStore, applyMiddleware } from 'redux'; import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk'; import thunk from 'redux-thunk';
import history from '../history';
import { routerMiddleware } from 'connected-react-router'
import rootReducer from '../reducers'; import rootReducer from '../reducers';
import getInitialState from '../utils/get-initial-state'; import getInitialState from '../utils/get-initial-state';
@ -8,7 +10,10 @@ const initialState = getInitialState();
const store = createStore( const store = createStore(
rootReducer, rootReducer,
initialState, initialState,
compose(
routerMiddleware(history),
applyMiddleware(thunk) applyMiddleware(thunk)
)
); );
export default store; export default store;

View File

@ -2004,6 +2004,13 @@ connect-history-api-fallback@^1.3.0:
version "1.5.0" version "1.5.0"
resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz#b06873934bc5e344fef611a196a6faae0aee015a" resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz#b06873934bc5e344fef611a196a6faae0aee015a"
connected-react-router@^5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/connected-react-router/-/connected-react-router-5.0.1.tgz#8379854fad7e027b1e27652c00ad534f8ad244b3"
dependencies:
immutable "^3.8.1"
seamless-immutable "^7.1.3"
console-browserify@^1.1.0: console-browserify@^1.1.0:
version "1.1.0" version "1.1.0"
resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10" resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
@ -3950,6 +3957,10 @@ immer@1.7.2:
version "1.7.2" version "1.7.2"
resolved "https://registry.yarnpkg.com/immer/-/immer-1.7.2.tgz#a51e9723c50b27e132f6566facbec1c85fc69547" resolved "https://registry.yarnpkg.com/immer/-/immer-1.7.2.tgz#a51e9723c50b27e132f6566facbec1c85fc69547"
immutable@^3.8.1:
version "3.8.2"
resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
import-cwd@^2.0.0: import-cwd@^2.0.0:
version "2.1.0" version "2.1.0"
resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9" resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
@ -7349,6 +7360,10 @@ schema-utils@^1.0.0:
ajv-errors "^1.0.0" ajv-errors "^1.0.0"
ajv-keywords "^3.1.0" ajv-keywords "^3.1.0"
seamless-immutable@^7.1.3:
version "7.1.4"
resolved "https://registry.yarnpkg.com/seamless-immutable/-/seamless-immutable-7.1.4.tgz#6e9536def083ddc4dea0207d722e0e80d0f372f8"
select-hose@^2.0.0: select-hose@^2.0.0:
version "2.0.0" version "2.0.0"
resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca" resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"