Javascript 单击重定向页面上的“反应”按钮
我正在使用React和bootstrap开发web应用程序。当应用按钮onClick时，我很难让我的页面重定向到另一个页面。如果在a href之后，我无法进入另一个页面 那么，您能告诉我是否需要使用react navigation或其他工具来使用按钮onClick导航页面吗Javascript 单击重定向页面上的“反应”按钮,javascript,reactjs,bootstrap-4,Javascript,Reactjs,Bootstrap 4,我正在使用React和bootstrap开发web应用程序。当应用按钮onClick时，我很难让我的页面重定向到另一个页面。如果在a href之后，我无法进入另一个页面 那么，您能告诉我是否需要使用react navigation或其他工具来使用按钮onClick导航页面吗 import React, { Component } from 'react'; import { Button, Card, CardBody, CardGroup, Col, Container, Input, Inp
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>
);
}
}
import React，{Component}来自'React'；
从“reactstrap”导入{Button、Card、CardBody、CardGroup、Col、Container、Input、InputGroup、InputGroupAddon、InputGroupText、Row、NavLink}；
类LoginLayout扩展了组件{
render（）{
返回(
...
登录
忘记密码了？
...
);
}
}
window.location.hash窗口上收听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>
);
}
}
类登录布局扩展组件{
构造函数（）{
this.handlePageChange=this.handlePageChange.bind（this）；
this.handleRouteChange=this.handleRouteChange.bind（this）；
this.state={页码：0}
}
handlePageChange（）{
window.location.hash=“#/my/target/url”；
}
HandlerRoute更改（事件）{
const destination=event.newURL；
//检查URL字符串或任何其他条件，以确定
//如何设置内部状态。
如果（某些条件）{
this.setState（{页码：1}）；
}
}
componentDidMount（）{
window.addEventListener（'hashchange'，this.handleRouteChange，false）；
}
render（）{
//@TODO:检查this.state.page_编号并呈现正确的页面。
返回(
...
登录
忘记密码
...
);
}
}
更新：
使用挂钩对路由器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;
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”导入React；
从“react router dom”导入{useHistory}；
函数LoginLayout（）{
const history=useHistory（）；
常量路由更改=（）=>{
let path=`newPath`；
历史。推送（路径）；
}
返回(
...
登录
忘记密码了？
...
);
}
导出默认登录布局；
使用React路由器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;
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 router dom'导入{useHistory}；
从“reactstrap”导入{Button、Card、CardBody、CardGroup、Col、Container、Input、InputGroup、InputGroupAddon、InputGroupText、Row、NavLink}；
类LoginLayout扩展了组件{
路由更改=（）=>{
let path=`newPath`；
让历史=使用历史（）；
历史。推送（路径）；
}
render（）{
返回(
...
登录
忘记密码了？
...
);
}
}
导出默认登录布局；
使用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);
从“react router dom”导入{withRouter}；
从“reactstrap”导入{Button、Card、CardBody、CardGroup、Col、Container、Input、InputGroup、InputGroupAddon、InputGroupText、Row、NavLink}；
类LoginLayout扩展了组件{
构造函数（）{
this.routeChange=this.routeChange.bind（this）；
}
路由更改（）{
let path=`newPath`；
这个。道具。历史。推（路径）；
}
render（）{
返回(
...
登录
忘记密码了？
...
);
}
}
使用路由器导出默认值（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");
}
<Button onClick={()=> history.push("/mypage")}>Click me!</Button>
finlay您需要使用路由器导入：
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>
)
}
}
从'react router dom'导入{useHistory}；
从“React”导入React，{Component}；
从“reactstrap”导入{Button}；
.....
.....
导出类yourComponent扩展组件{
.....
componentDidMount（）{
让历史=使用历史；
.......
}
render（）{
返回(
.....
.....
history.back（）}>back
)
}
}
React路由器v5.1.2：
import { useHistory } from 'react-router-dom';
const App = () => {
const history = useHistory()
<i className="icon list arrow left"
onClick={() => {
history.goBack()
}}></i>
}
从'react router dom'导入{useHistory}；
常量应用=（）=>{
const history=useHistory（）
{
history.goBack（）
}}>
}
我也很难使用navlink路由到不同的视图
我的实现如下，工作完美
<NavLink tag='li'>
<div
onClick={() =>
this.props.history.push('/admin/my- settings')
}
>
<DropdownItem className='nav-item'>
Settings
</DropdownItem>
</div>
</NavLink>
this.props.history.push（“/admin/my-settings”）
}
>
设置
用div包装它，将onClick处理程序分配给
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()}
</>
)
}
}
<button onClick={()=>{props.history.push('/link')}} >Press</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