如何通过单击类组件中的按钮在react中进行路由?

Question

我在react类组件中有一个按钮如下

<Link to="display">
<button onClick={this.nextBtn} className="nextBtn">
Submit
</button>
</Link>

通过单击按钮，我需要使用功能nextBtn = () => {}将其路由到另一个名为<Display />的组件。

我看到在函数组件中可以通过useHistory，但在类组件中，我不知道如何做到这一点。

Answer 1

您也可以使用import { withRouter } from "react-router";中的withRouter并注入您的组件。你可以把history作为道具，用history.push()来导航。

例子:

import React from "react";
import { withRouter } from "react-router";
class ShowTheLocation extends React.Component {
nextBtn = () => {
const { history } = this.props;
history.push("/display");
};
render() {
return (
<Link to="display">
<button onClick={this.nextBtn} className="nextBtn">
Submit
</button>
</Link>
);
}
}
export default withRouter(ShowTheLocation);

Answer 2

您也可以试试这个。这对我来说很有用

import { browserHistory } from 'react-router';
class MyClass extends Component {
nextBtn = () => {
browserHistory.push('/display');
}
}

Answer 3

我假设你使用的是react-router之类的库。

你想从react-router获得对历史对象的访问权。React路由器提供了所谓的高阶函数，它可以访问历史并将其注入到你的类组件中。然后在你的组件内部，你可以通过this.props.history.

访问它。

import { withRouter } from 'react-router-dom';
//JS-Example
class YourJSComponent extends Component {
/**
* Since the class gets exported wrapped in withrouter(YourComponent), history is now in the props.
*/
anyRedirectMethod = () => {
this.props.history.push("/yourRoute")
}

render(
return(
<Link to="display">
<button onClick={this.anyRedirectMethod} className="nextBtn">
Submit
</button>
</Link>
)
)
}
export default withRouter(YourJSComponent);

Answer 4

您可以使用几种方法路由到另一个页面。首先，在您的示例中，您使用的是链接。但是你的路线名称传递错误。你必须像这样在前面传递路由名:

<Link to={'/display'}> 
// display should be a routes name
<button className="nextBtn">
Submit
</button>
</Link>

https://reactrouter.com/web/api/Link。

你可以在这里阅读更多信息:

第二个方法:
使用react-router-dom包来定义路由，然后在按钮的onClick事件上使用下面提到的方法之一。

1. this.props.history.push("componentpath").
2. browserHistory object (in react-router package).

也检查这个问题的解决方案…如何在react js中从一个页面导航到另一个页面?