2

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

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

这应该有效。但是，尽管单击“我的个人资料”时 URL 会更改为正确的 URL，但该页面并未出现。它只是保留为旧页面。

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

这是我的代码：

// 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

我要疯了，试图解决这个问题。帮助。

4

2 回答 2

2

我认为与您使用<BrowserRouter>. 它创建自己的历史实例，并监听其变化。因此，不同的实例将更改 url 但不会更新<BrowserRouter>. 相反，您可以使用ConnectedRouter并将历史实例传递为

import createHistory from 'history/createBrowserHistory';
...
const history = createHistory();
...
<ConnectedRouter history={history}>
...
</ConnectedRouter>
于 2018-02-15T04:14:40.200 回答
2

您需要集成react-router-redux.

看起来更新后的状态没有反映在容器中，因为 redux 会进行浅层比较以检查组件是否需要更新。

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>

此外，在减速器处，添加此代码段。

let updatedStore = JSON.parse(JSON.stringify(state));
于 2018-02-15T04:11:48.747 回答