如何在有状态组件的反应路由器 5.1.2 中使用 history.push('path')？

Posted 2023-02-21

【中文标题】如何在有状态组件的反应路由器 5.1.2 中使用 history.push(\'path\')？

【英文标题】：How can I use history.push('path') in react router 5.1.2 in stateful component?如何在有状态组件的反应路由器 5.1.2 中使用 history.push('path')？

【发布时间】：2020-04-11 15:11:58

【问题描述】：

如何在有状态组件（类组件）的 react router 5.1.2 中使用 history.push('path')？

我找到了这个，但它是无状态组件的解决方案。

import  useHistory  from "react-router-dom";

function App() 
  let history = useHistory();

【参考方案1】：

这是您可以在基于类的组件中使用this.props.history.push('/...') 和使用钩子的history.push("/...") 导航到其他组件的方法。

为了更好地理解，请参阅Official documentation.

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>

      <hr />

      <Route exact path="/" component=Home />
      <Route path="/about" component=About />
    </div>
  </Router>
);
const About = () => (
  <div>
    <h2>About</h2>
  </div>
);
class Home extends React.Component 
  handleClick = e => 
    this.props.history.push("/about");
  ;
  render() 
    return (
      <div>
        <h2>Home</h2>

        <button onClick=this.handleClick>Click to navigate about page</button>
      </div>
    );
  

Live Demo

【参考方案2】：

我在使用 react router v5 时遇到了同样的问题。 当尝试在下面以编程方式更改路线时，

this.props.history.push(
    pathname: `/target-path`,
    state: variable_to_transfer
);

this.props.history 是未定义。

这是我的 react router v5 解决方案。

import React,  Component  from "react";
import  withRouter  from 'react-router-dom';

class MyClass extends Component 
    routingFunction = (param) => 
        this.props.history.push(
            pathname: `/target-path`,
            state: param
        );
    
    ...

export default withRouter(MyClass);

这里是reference article。 希望它可以帮助您节省时间。

Next.js 更新 您应该在 Next.js 中使用来自 'next/router' 的 withRouter。

import React,  Component  from "react";
import  withRouter  from 'react-router-dom';

class MyClass extends Component 
  routingFunction = (param) => 
     this.props.router.push('/dashboard');
  
  ...

export default withRouter(MyClass);

【讨论】：

这个例子中的关键点是 withRouter() 创建了一个新的高阶组件，它将具有三个新的 props：match、location 和 history。

【参考方案3】：

只需将所有内容包装在 中，然后使用 创建一个对象字面量，例如：

import  BrowserRouter  from 'react-router-dom';
...
...
return(
   <BrowserRouter>
      ...
      ...
   </BrowserRouter>
)

在函数中，使用：

import  useHistory  from 'react-router-dom';
...
...
const history = useHistory();

function handlePush() 
...
history.push('/url');
...

这对你来说应该很锻炼。 乐意效劳。 ? 来自 RTTSS。

【讨论】：

问题在于有状态的组件。我们不能为他们使用钩子