React Router 4和props.history.push [英] React Router 4 and props.history.push

问题描述

在React中有一些让我发疯的事情，我需要你的帮助。基本上，当用户点击我的个人资料时，我想重定向到用户的个人资料。为此，我使用以下代码段

There's something driving me crazy in React, and I need your help. Basically, when the user clicks "My Profile", I want to redirect to the user's profile. To do that, I use the following snippet

viewProfile = () => {
    console.log('My USER ID: ', this.props.userId);
    this.props.history.push(`/profile/${this.props.userId}`);
}

这应该有效。但是，虽然在单击我的个人资料时URL正在更改为正确的URL，但该页面未显示。它只是保留旧页面。

This should work. However, although the URL is changing to the correct URL when 'My Profile' is clicked, the page isn't appearing. It just stays as the old page.

谷歌搜索了一段时间后，我知道它与redux有关...但是，我找不到解决方案。 （this.props.userId来自一个布局组件，后者从redux商店获取它）

After googling for a while, I know it's something to do with redux ... However, I can't find a solution. (this.props.userId is coming from a Layout component, which is in turn getting it from redux store)

这是我的代码：

// React
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
// Redux
import { connect } from 'react-redux';
import * as actions from '../../../store/actions/';
// Containers and Components
   ...// more imports

const styles =  // styles

class NavBar extends Component {

  handleAuthentication = () => {
    if (this.props.isAuthenticated) {
      this.props.history.push('/logout');
    } else {
      this.props.history.push('/login');
    }
  };

  viewProfile = () => {
    console.log('My USER ID: ', this.props.userId);
    this.props.history.push(`/profile/${this.props.userId}`);
  };

  render() {
    let buttons = (
      <Auxillary>
        {this.props.isAuthenticated ? (
          <RaisedButton
            label="MY PROFILE"
            primary={true}
            style={styles.button}
            onClick={this.viewProfile} // THIS IS THE METHOD
          />
        ) : null}
        <RaisedButton
          backgroundColor={grey900}
          label={this.props.isAuthenticated ? 'LOGOUT' : 'LOGIN'}
          labelColor={grey50}
          style={styles.button}
          onClick={this.handleAuthentication}
        />
      </Auxillary>
    );

    let itemSelectField = null;
    if (this.props.location.pathname === '/items') {
      itemSelectField = (
        <ItemSelectField
          onSelectTags={tags => this.props.filterItemsByTagName(tags)}
        />
      );
    }
    let bar = null;
    if (
      this.props.location.pathname !== '/login' &&
      this.props.location.pathname !== '/register'
    ) {
      bar = (
        <AppBar
          style={styles.appBar}
          title={itemSelectField}
          iconElementLeft={
            <img style={styles.logoHeight} src={Logo} alt="logo" />
          }
          iconElementRight={buttons}
        />
      );
    }
    return <Auxillary>{bar}</Auxillary>;
  }
}

const mapDispatchToProps = dispatch => {
  return {
    filterItemsByTagName: selectedTags =>
      dispatch(actions.filterItemsByTagName(selectedTags))
  };
};

export default withRouter(connect(null, mapDispatchToProps)(NavBar));

你可以在这里找到整个应用程序： https://github.com/Aseelaldallal/boomtown/tree/boomtown-backend-comm

You can find the entire app here: https://github.com/Aseelaldallal/boomtown/tree/boomtown-backend-comm

我疯了解决这个问题。帮助。

I'm going crazy trying to fix this. help.

推荐答案

您需要整合 react-router-redux 。

You need to integrate the react-router-redux.

它的外观就像更新的状态没有反映在容器中一样，因为redux做了浅层比较以检查组件是否需要更新。

Its look like the updated state is not reflecting in the container as redux do shallow comparison to check whether the component need to be update or not.

import {Router} from 'react-router-dom';
import { ConnectedRouter, routerReducer, routerMiddleware } from 'react-router-redux';
import createHistory from 'history/createBrowserHistory';

const history = createHistory()
const middleware = routerMiddleware(history)


const rootReducer = combineReducers({
    router: routerReducer,
  //other reducers
});

const store = createStore(rootReducer,applyMiddleware(middleware));

<Provider store={store}>
<ConnectedRouter>
 //routes
</ConnectedRouter>
</Provider>

此外，在减压器中，添加此代码段。

Also,at reducers,add this snippet.

let updatedStore = JSON.parse(JSON.stringify(state));

这篇关于React Router 4和props.history.push的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！