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

此代码正在更改网址，但在点击主页上的home按钮时不会呈现个人资料页面。另外这里是redux logger输出图片的link。

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

Answer 1

当你点击它时，它应该像你现在写的一样呈现主路线？不是它应该做的事情。

路由器改变导航，但不使用redux渲染页面

1 个答案: