反应路由器更改导航但不使用 redux 呈现页面

Question

我有一个简单的 react-router-redux 应用程序，其中/home 有一个按钮，单击该按钮应导航到/profile 页面。目前我的代码如下所示。

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

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

reducers/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())
})

当单击主页上的home 按钮时，此代码正在更改 url 但不呈现个人资料页面。还有一张link redux logger 输出的图片。

我被困了几个小时，其他 SO 答案并没有太大帮助。任何帮助将不胜感激。

Answer 1

当您单击主页时，它应该呈现您现在编写的主页路线？这不就是它应该做的吗。