Réagir routeur change la navigation mais ne rend pas la page en utilisant redux

Question

J'ai une simple application de réaction-routeur-redux en cours où /home a un bouton qui, lorsque cliqué, devrait naviguer vers la page /profile. Actuellement, mon code ressemble à ceci.

actions/index.js

import { push } from 'react-router-redux' 
import * as actionTypes from '../constants' 

const homeClicked =() => { 
    return { type: actionTypes.HOME_CLICK } 
} 

const profileClicked =() => { 
    return { type: actionTypes.PROFILE_CLICK } 
} 

export const handleHomeClick =() => { 
    return (dispatch) => { 
    dispatch(homeClicked()) 
    dispatch(push('/profile')) 
    } 
} 

export const handleProfileClick =() => { 
    return (dispatch) => { 
    dispatch(profileClicked()) 
    dispatch(push('/')) 
    } 
} 

conteneurs/HomeContainer.js

import React from 'react' 
import { connect } from 'react-redux' 
import * as actions from '../actions' 
import { withRouter } from 'react-router-dom' 
import PropTypes from 'prop-types' 

class Home extends React.Component { 
    handleClick =() => { 
    this.props.handleHomeClick(); 
    } 

    render() { 
    return (
     <div className='Home'> 
     <button onClick={this.handleClick}>Home</button> 
     </div> 
    ) 
    } 
} 

Home.propTypes = { 
    handleHomeClick: PropTypes.func.isRequired 
} 

const mapStateToProps =() => { 
    return {} 
} 

export default withRouter(connect(mapStateToProps, actions)(Home)) 

conteneurs/ProfileContainer.js

import React from 'react' 
import { connect } from 'react-redux' 
import * as actions from '../actions' 
import { withRouter } from 'react-router-dom' 
import PropTypes from 'prop-types' 

class Profile extends React.Component { 
    handleClick =() => { 
    this.props.handleProfileClick(); 
    } 

    render() { 
    return (
     <div className='Profile'> 
     <button onClick={this.handleClick}>Profile</button> 
     </div> 
    ) 
    } 
} 

Profile.propTypes = { 
    handleProfileClick: PropTypes.func.isRequired 
} 

const mapStateToProps =() => { 
    return {} 
} 

export default withRouter(connect(mapStateToProps, actions)(Profile)) 

Réducteurs/index.js

import { HOME_CLICK, PROFILE_CLICK } from '../constants' 
import { combineReducers } from 'redux' 
import { routerReducer } from 'react-router-redux' 

const clickReducer = (state={ message: 'HOME' }, action) => { 
    switch(action.type) { 
    case HOME_CLICK: 
    return { message: 'PROFILE' }; 
    case PROFILE_CLICK: 
    return { message: 'HOME' }; 
    default: 
    return state 
    } 
} 

export default combineReducers({ 
    clicking: clickReducer, 
    routing: routerReducer 
}) 

constants.js

export const HOME_CLICK = 'HOME_CLICK' 
export const PROFILE_CLICK = 'PROFILE_CLICK' 

history.js

import { createBrowserHistory } from 'history' 

export default createBrowserHistory() 

index.js

import React from 'react' 
import ReactDOM from 'react-dom' 
import { Provider } from 'react-redux'; 
import createRoutes from './routes' 
import rootReducer from './reducers' 
import thunk from 'redux-thunk' 
import browserHistory from './history' 
import reduxLogger from 'redux-logger' 
import { createStore, applyMiddleware } from 'redux' 
import { syncHistoryWithStore, routerMiddleware } from 'react-router-redux'; 

const middlewares = applyMiddleware(
    thunk, 
    routerMiddleware(browserHistory), 
    reduxLogger 
); 
const store = createStore(rootReducer, middlewares) 

const history = syncHistoryWithStore(browserHistory, store) 

const routes = createRoutes(history) 

ReactDOM.render(
    <Provider store={store}> 
    {routes} 
    </Provider>, 
    document.getElementById('root') 
) 

routes.js

import React from 'react' 
import { Router, Route, Switch } from 'react-router' 
import HomeContainer from './containers/HomeContainer' 
import ProfileContainer from './containers/ProfileContainer' 

const createRoutes = (history) => { 
    return (
    <Router history={history}> 
     <Switch> 
     <Route exact path='/' component={HomeContainer}/> 
     <Route path='/profile' component={ProfileContainer}/> 
     </Switch> 
    </Router> 
) 
} 

export default createRoutes 

app.js

import express from 'express' 
import config from './config' 
import path from 'path' 

const app = express() 

app.set('view engine', 'ejs'); 

app.use(express.static(path.join(__dirname, 'public'))) 

app.get('*', (req, resp) => { 
    resp.render('index'); 
}) 

app.listen(config.port, config.host,() => { 
    console.info('Server listening to', config.serverUrl()) 
}) 

Ce code est en train de changer l'URL, mais ne rendant pas la page de profil lorsque le bouton home sur la page d'accueil est cliqué. Voici également un link de l'image de sortie de l'enregistreur redux.

Je suis coincé sur ce sujet pendant quelques heures et d'autres réponses SO n'ont pas été d'une grande aide. Toute aide serait appréciée.

Answer 1

Lorsque vous cliquez sur la page d'accueil, l'itinéraire de départ doit s'afficher comme vous l'avez écrit maintenant? N'est-ce pas ce qu'il est censé faire?