反應路由器更改導航，但不使用REDX呈現頁面

Question

我有一個簡單的react-router-redux應用程序正在進行，其中/home有一個按鈕，點擊時應導航到/profile頁面。目前我的代碼看起來像這樣。

動作/ 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('/')) 
    } 
} 

容器/ 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)) 

容器/ 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)) 

減速器/ 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()) 
}) 

此代碼更改URL，但點擊主頁上的home按鈕時，沒有渲染的個人資料頁面。還有一個link的redux記錄器輸出的圖片。

我被困在這個幾個小時了，其他的答案沒有太多的幫助。任何幫助，將不勝感激。

Answer 1

當你點擊家庭時，它應該渲染家庭路線，因爲你現在寫它？這不是它應該做的。