React Router 4 和 props.history.push

Posted 2023-02-21

【中文标题】React Router 4 和 props.history.push

【英文标题】：React Router 4 and props.history.push

【发布时间】：2018-07-25 18:24:06

【问题描述】：

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

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

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

【参考方案1】：

您需要集成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>

另外，在 reducers 中，添加这个 sn-p。

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

【讨论】：

createhistory 来自哪里（即我从哪里导入）？

更新了答案。你需要安装 react-router-dom

谢谢！我应该在哪里添加这个，在减速器中......？我有几个减速器..

你必须组合你的减速器，如rootReducer 所示，使用combineReducers

【参考方案2】：

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

import createHistory from 'history/createBrowserHistory';
...
const history = createHistory();
...
<ConnectedRouter history=history>
...
</ConnectedRouter>