React-router v4 this.props.history.push(...) 不工作

IT技术 javascript reactjs react-redux react-router
2021-04-08 06:47:31

我正在尝试以编程方式使用路由，this.props.history.push(..)但它似乎不起作用。

这是路由器： 

import {
 BrowserRouter as Router,
 Route
} from 'react-router-dom';

<Router>
 <Route path="/customers/" exact component={CustomersList} />
 <Route path="/customers/:id" exact component="{Customer} />
</Router>

在 CustomerList 中，呈现客户列表。单击客户 (li) 应该使应用程序路由到客户：

import { withRouter } from 'react-router'

class Customers extends Component {
  static propTypes = {
    history: PropTypes.object.isRequired
  }

 handleCustomerClick(customer) {
   this.props.history.push(`/customers/${customer.id}`);
 }

 render() {
   return(
    <ul>
      { this.props.customers.map((c) =>
        <li onClick={() => this.handleCustomerClick(c)} key={c.id}>
          {c.name}
        </li> 
    </ul>
  )

 }
}

//connect to redux to get customers

CustomersList = withRouter(CustomersList);
export default CustomersList;

代码是部分的，但完美地说明了情况。发生的情况是浏览器的地址栏根据 history.push(..) 发生变化，但视图没有更新，Customer 组件没有呈现，CustomersList 仍然存在。有任何想法吗？

6个回答

所以我来到这个问题希望得到答案，但无济于事。我用过了

const { history } = this.props;
history.push("/thePath")

在同一个项目中，它按预期工作。经过进一步的实验和一些比较和对比，我意识到如果在嵌套组件中调用此代码将无法运行。因此只有渲染的页面组件才能调用此函数才能正常工作。

在此处查找工作沙盒

  • 历史：v4.7.2
  • react：v16.0.0
  • react域：v16.0.0
  • react-router-dom: v4.2.2
我得到 history.push( 不是函数
2021-05-22 06:47:31
考虑到 react-router 的速度有多快（就此而言，整个 JS 生态系统都在移动），如果您包含所使用的版本，它将改善您的答案，如果您提供MCVE，您的答案将令人惊讶。像JSFiddle这样的服务应该对此有所帮助。
2021-05-28 06:47:31
恕我直言，这与 this.pros.history.pus() 相同。您只需将其放入其他变量即可。两者对我来说都未定义....
2021-06-16 06:47:31

在最新版本的react-router中，事情似乎发生了一些变化。您现在可以通过上下文访问历史记录。this.context.history.push('/path')

另请参阅对此 github 问题的回复：https : //github.com/ReactTraining/react-router/issues/4059

一个更好的方法是使用withRouterHOC。github.com/ReactTraining/react-router/blob/master/packages/...
2021-06-18 06:47:31

您可以尝试加载具有历史记录的子组件。为此，请通过props传递“历史”。类似的东西：

  return (
  <div>
    <Login history={this.props.history} />
    <br/>
    <Register/>
  </div>
)
看起来就是这样……而且很伤心
2021-06-04 06:47:31

对我来说（react-router v4，react v16）问题是我的导航组件没问题：

import { Link, withRouter } from 'react-router-dom'

class MainMenu extends Component {

  render() {
    return (
            ...
            <NavLink to="/contact">Contact</NavLink>
            ...
    );
  }
}

export default withRouter(MainMenu);

两者都使用 

to="/contact"

或者 

OnClick={() => this.props.history.push('/contact')};

行为仍然相同 - 浏览器中的 URL 已更改，但呈现了错误的组件，使用相同的旧 URL 调用路由器。

罪魁祸首是路由器定义。我不得不将 MainMenu 组件作为 Router 组件的子组件移动！

// wrong placement of the component that calls the router
<MainMenu history={this.props.history} />
<Router>
   <div>
     // this is the right place for the component!
     <MainMenu history={this.props.history} />
     <Route path="/" exact component={MainPage} />
     <Route path="/contact/" component={MainPage} />
   </div>
</Router>

您可以通过withRouter高阶组件访问历史对象的属性和最接近的匹配项。withRouter将在渲染时将更新的匹配、位置和历史props传递给包装的组件。

import React, { Component } from 'react'
import { withRouter } from 'react-router'; 
// you can also import "withRouter" from 'react-router-dom';

class Example extends Component {
    render() {
        const { match, location, history } = this.props
        return (
            <div>
                <div>You are now at {location.pathname}</div>
                <button onClick={() => history.push('/')}>{'Home'}</button>
            </div>
        )
    }
}


export default withRouter(Example)
其它你可能感兴趣的问题
上一篇如何在 TypeScript 中输入这个“as”JSX 属性？ 下一篇React Hook useEffect 缺少依赖项：'list'