点击重定向页面

我正在使用 React 和 bootstrap 开发一个 web 应用程序。当涉及到应用按钮 onClick 时，我很难让页面被重定向到另一个页面。如果过了一页，我就不能再往下看了。

所以你能告诉我是否有任何需要使用反应导航或其他导航页面使用 ButtononClick？

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>
);
}
}
601663 次浏览
小开

一个简单的点击按钮处理程序，并设置 window.location.hash将做的技巧，假设您的目的地也在应用程序。

您可以监听 window上的 hashchange事件，解析所获得的 URL，调用 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>
);
}
}
小开

更新 :

React 路由器 v6 :

import React from 'react';
import { useNavigate } from "react-router-dom";
function LoginLayout() {
  

let navigate = useNavigate();
const routeChange = () =>{
let path = `newPath`;
navigate(path);
}
  

return (
<div className="app flex-row align-items-center">
<Container>
...
<Button color="primary" className="px-4"
onClick={routeChange}
>
Login
</Button>
...
</Container>
</div>
);
}}

用钩子对路由器 v5做出反应:

import React from 'react';
import { useHistory } from "react-router-dom";
function LoginLayout() {
  

const history = useHistory();
  

const routeChange = () =>{
let path = `newPath`;
history.push(path);
}


return (
<div className="app flex-row align-items-center">
<Container>
...
<Row>
<Col xs="6">
<Button color="primary" className="px-4"
onClick={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 LoginLayout;

使用 React 路由器 v5:

import { useHistory } from 'react-router-dom';
import { Button, Card, CardBody, CardGroup, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row, NavLink  } from 'reactstrap';
    

class LoginLayout extends Component {
  

routeChange=()=> {
let path = `newPath`;
let history = useHistory();
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 LoginLayout;

使用 React 路由器 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);
小开

我试图找到重定向的方法，但失败了。重定向 onClick 比我们想象的要简单。只需将以下基本的 JavaScript 放在 onClick 函数中，不要胡闹:

window.location.href="pagelink"
小开
最佳答案

不要使用按钮作为链接，而是使用按钮样式的链接。

<Link to="/signup" className="btn btn-primary">Sign up</Link>
小开

做到这一点的一个非常简单的方法是:

onClick={this.fun.bind(this)}

以及功能:

fun() {
this.props.history.push("/Home");
}

你需要用路由器导入的辅助设备:

import { withRouter } from 'react-router-dom';

然后以下列方式出口:

export default withRouter (comp_name);
小开

这可以非常简单地完成，您不需要为它使用不同的函数或库。

onClick={event =>  window.location.href='/your-href'}
小开

使用 React 路由器 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>


)
}
}
小开

反应路由器 v5.1.2:

import { useHistory } from 'react-router-dom';
const App = () => {
const history = useHistory()
<i className="icon list arrow left"
onClick={() => {
history.goBack()
}}></i>
}
小开

我还遇到了使用导航链接路由到不同视图的麻烦。

我的执行如下，工作完美;

<NavLink tag='li'>
<div
onClick={() =>
this.props.history.push('/admin/my- settings')
}
>
<DropdownItem className='nav-item'>
Settings
</DropdownItem>
</div>
</NavLink>

用 div 包装它，将 onClick 处理程序分配给 div。使用 history 对象推送新视图。

小开

首先，进口:

import { useHistory } from 'react-router-dom';

然后，在函数或类中:

const history = useHistory();

最后，将其放入 onClick函数:

<Button onClick={()=> history.push("/mypage")}>Click me!</Button>
小开

来自 react-router-dom的 useHistory()可以解决您的问题

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;
小开

如果上述所有方法都失败了，可以使用下面这样的方法:

    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()}
</>
)
}
}
小开

如果要重定向到 Click 事件上的路由。

照我说的做

功能组件

props.history.push('/link')

在类组件中

this.props.history.push('/link')

例如:

<button onClick={()=>{props.history.push('/link')}} >Press</button>

测试对象:

反应路由器 -Dom: 5.2.0,

反应: 16.12.0

小开

如果你已经创建了一个类来定义你的 Button 的属性(如果你已经创建了一个按钮类) ，并且你想在另一个类中调用它并且通过你在这个新类中创建的按钮链接到另一个页面，只需导入你的“ Button”(或者你的按钮类的名称)并使用下面的代码:

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
小开

确保从“反应路由器-域”导入{ Link } ; 只是超链接而不是使用函数。

import {Link} from "react-router-dom";


<Button>
<Link to="/yourRoute">Route Name</Link>
</Button>

提交答案