我正在使用React和bootstrap处理Web应用程序。当应用按钮onClick时，我花了很多时间让我的页面重定向到另一个。如果在一个href后，我不能去另一页。
那么请你告诉我是否需要使用反应导航或其他方法使用Button onClick导航页面？
import React, { Component } from 'react';
import { Button, Card, CardBody, CardGroup, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row, NavLink } from 'reactstrap';
class LoginLayout extends Component {
render() {
return (
<div className="app flex-row align-items-center">
<Container>
...
<Row>
<Col xs="6">
<Button color="primary" className="px-4">
Login
</Button>
</Col>
<Col xs="6" className="text-right">
<Button color="link" className="px-0">Forgot password?</Button>
</Col>
</Row>
...
</Container>
</div>
);
}
}
答案 0 :(得分：24)
使用React Router v4：
import { withRouter } from 'react-router-dom';
import { Button, Card, CardBody, CardGroup, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row, NavLink } from 'reactstrap';
class LoginLayout extends Component {
constuctor() {
this.routeChange = this.routeChange.bind(this);
}
routeChange() {
let path = `newPath`;
this.props.history.push(path);
}
render() {
return (
<div className="app flex-row align-items-center">
<Container>
...
<Row>
<Col xs="6">
<Button color="primary" className="px-4"
onClick={this.routeChange}
>
Login
</Button>
</Col>
<Col xs="6" className="text-right">
<Button color="link" className="px-0">Forgot password?</Button>
</Col>
</Row>
...
</Container>
</div>
);
}
}
export default withRouter(LoginLayout);
答案 1 :(得分：5)
请勿将按钮用作链接。而是使用样式为按钮的链接。
<Link to="/signup" className="btn btn-primary">Sign up</Link>
答案 2 :(得分：5)
useHistory()中的 react-router-dom可以解决您的问题
import React from 'react';
import { useHistory } from "react-router-dom";
function NavigationDemo() {
const history = useHistory();
const navigateTo = () => history.push('/componentURL');//eg.history.push('/login');
return (
<div>
<button onClick={navigateTo} type="button" />
</div>
);
}
export default NavigationDemo;
答案 3 :(得分：3)
我正在尝试使用重定向的方法，但是失败了。重定向onClick比我们想象的要简单。只需将以下基本JavaScript放入onClick函数中即可：
window.location.href="pagelink"
答案 4 :(得分：3)
如果上述所有方法均失败，请使用以下方法：
import React, { Component } from 'react';
import { Redirect } from "react-router";
export default class Reedirect extends Component {
state = {
redirect: false
}
redirectHandler = () => {
this.setState({ redirect: true })
this.renderRedirect();
}
renderRedirect = () => {
if (this.state.redirect) {
return <Redirect to='/' />
}
}
render() {
return (
<>
<button onClick={this.redirectHandler}>click me</button>
{this.renderRedirect()}
</>
)
}
}
答案 5 :(得分：2)
执行此操作的一种非常简单的方法是：
onClick={this.fun.bind(this)}
以及功能：
fun() {
this.props.history.push("/Home");
}
您需要使用路由器导入的图稿
import { withRouter } from 'react-router-dom';
并将其导出为：
export default withRouter (comp_name);
答案 6 :(得分：2)
React Router v5.1.2：
import { useHistory } from 'react-router-dom';
const App = () => {
const history = useHistory()
<i className="icon list arrow left"
onClick={() => {
history.goBack()
}}></i>
}
答案 7 :(得分：2)
首先，将其导入：
import { useHistory } from 'react-router-dom';
然后，在函数或类中
const history = useHistory();
最后，将其放在onClick函数中：
<Button onClick={()=> history.push("/mypage")}>Click me!</Button>
答案 8 :(得分：2)
如果你已经创建了一个类来定义你的按钮的属性（如果你已经创建了一个按钮类），并且你想在另一个类中调用它并通过你在这个新创建的按钮链接到另一个页面类，只需导入您的“按钮”（或按钮类的名称）并使用以下代码：
import React , {useState} from 'react';
import {Button} from '../Button';
function Iworkforbutton() {
const [button] = useState(true);
return (
<div className='button-class'>
{button && <Button onClick={()=> window.location.href='/yourPath'}
I am Button </Button>
</div>
)
}
export default Iworkforbutton
答案 9 :(得分：1)
按钮上的简单点击处理程序，设置window.location.hash就行了，假设您的目的地也在应用内。
您可以在hashchange上收听window事件，解析您获得的网址，致电this.setState()，然后您拥有自己的简单路由器，无需图书馆
class LoginLayout extends Component {
constuctor() {
this.handlePageChange = this.handlePageChange.bind(this);
this.handleRouteChange = this.handleRouteChange.bind(this);
this.state = { page_number: 0 }
}
handlePageChange() {
window.location.hash = "#/my/target/url";
}
handleRouteChange(event) {
const destination = event.newURL;
// check the URL string, or whatever other condition, to determine
// how to set internal state.
if (some_condition) {
this.setState({ page_number: 1 });
}
}
componentDidMount() {
window.addEventListener('hashchange', this.handleRouteChange, false);
}
render() {
// @TODO: check this.state.page_number and render the correct page.
return (
<div className="app flex-row align-items-center">
<Container>
...
<Row>
<Col xs="6">
<Button
color="primary"
className="px-4"
onClick={this.handlePageChange}
>
Login
</Button>
</Col>
<Col xs="6" className="text-right">
<Button color="link" className="px-0">Forgot password </Button>
</Col>
</Row>
...
</Container>
</div>
);
}
}
答案 10 :(得分：1)
这可以非常简单地完成，您无需为其使用其他函数或库。
onClick={event => window.location.href='/your-href'}
答案 11 :(得分：1)
使用React Router v5.1：
import {useHistory} from 'react-router-dom';
import React, {Component} from 'react';
import {Button} from 'reactstrap';
.....
.....
export class yourComponent extends Component {
.....
componentDidMount() {
let history = useHistory;
.......
}
render() {
return(
.....
.....
<Button className="fooBarClass" onClick={() => history.back()}>Back</Button>
)
}
}
答案 12 :(得分：1)
我也很难使用navlink路由到另一个视图。
我的实现如下，并且运行良好；
<NavLink tag='li'>
<div
onClick={() =>
this.props.history.push('/admin/my- settings')
}
>
<DropdownItem className='nav-item'>
Settings
</DropdownItem>
</div>
</NavLink>
用div包装它，将onClick处理程序分配给div。使用历史记录对象来推送新视图。
答案 13 :(得分：1)
只需这样做
props.history.push('/link')
this.props.history.push('/link')
示例：
<button onClick={()=>{props.history.push('/link')}} >Press</button>
react-router-dom：5.2.0，
反应：16.12.0