Javascript 反应路由器：如何手动调用链接？

我对ReactJS和ReactRouter都是新手。我有一个组件，它通过props从react router接收

对象。每当用户单击此组件内的“下一步”按钮时，我都希望手动调用

对象

现在，我正在使用refs访问支持实例，并手动单击

生成的“a”标记

问题：是否有办法手动调用链接（例如

this.props.next.go

）

这是我的当前代码：

//in MasterPage.js
var sampleLink = <Link to="/sample">Go To Sample</Link>
<Document next={sampleLink} />

//in Document.js
...
var Document = React.createClass({
   _onClickNext: function() {
      var next = this.refs.next.getDOMNode();
      next.querySelectorAll('a').item(0).click(); //this sounds like hack to me
   },
   render: function() {
      return (
         ...
         <div ref="next">{this.props.next} <img src="rightArrow.png" onClick={this._onClickNext}/></div>
         ...
      );
   }
});
...

//在MasterPage.js中
var sampleLink=转到样本
//在Document.js中
...
var Document=React.createClass({
_onClickNext:function（）{
var next=this.refs.next.getDOMNode（）；
next.querySelectorAll（'a'）.item（0）.click（）；//这听起来像是黑客攻击
},
render:function（）{
返回(
...
{this.props.next}
...
);
}
});
...

这是我想要的代码：

//in MasterPage.js
var sampleLink = <Link to="/sample">Go To Sample</Link>
<Document next={sampleLink} />

//in Document.js
...
var Document = React.createClass({
   render: function() {
      return (
         ...
         <div onClick={this.props.next.go}>{this.props.next.label} <img src="rightArrow.png" /> </div>
         ...
      );
   }
});
...

//在MasterPage.js中
var sampleLink=转到样本
//在Document.js中
...
var Document=React.createClass({
render:function（）{
返回(
...
{this.props.next.label}
...
);
}
});
...

或者您甚至可以尝试执行onClick this（更暴力的解决方案）：

---

好的，我想我找到了一个合适的解决方案

现在，我不再将

作为prop发送到文档，而是发送

，这是react路由器链接的自定义包装。通过这样做，我能够将右箭头作为链接结构的一部分，同时仍然避免在文档对象中包含路由代码

更新后的代码如下所示：

//in NextLink.js
var React = require('react');
var Right = require('./Right');

var NextLink = React.createClass({
    propTypes: {
        link: React.PropTypes.node.isRequired
    },

    contextTypes: {
        transitionTo: React.PropTypes.func.isRequired
    },

    _onClickRight: function() {
        this.context.transitionTo(this.props.link.props.to);
    },

    render: function() {
        return (
            <div>
                {this.props.link}
                <Right onClick={this._onClickRight} />
            </div>  
        );
    }
});

module.exports = NextLink;

...
//in MasterPage.js
var sampleLink = <Link to="/sample">Go To Sample</Link>
var nextLink = <NextLink link={sampleLink} />
<Document next={nextLink} />

//in Document.js
...
var Document = React.createClass({
   render: function() {
      return (
         ...
         <div>{this.props.next}</div>
         ...
      );
   }
});
...

//在NextLink.js中
var React=要求（'React'）；
var Right=要求（'./右'）；
var NextLink=React.createClass({
道具类型：{
链接：React.PropTypes.node.isRequired
},
上下文类型：{
转换到：React.PropTypes.func.isRequired
},
_onClickRight:function（）{
this.context.transitiono（this.props.link.props.to）；
},
render:function（）{
返回(
{this.props.link}
);
}
});
module.exports=NextLink；
...
//在MasterPage.js中
var sampleLink=转到样本
var nextLink=
//在Document.js中
...
var Document=React.createClass({
render:function（）{
返回(
...
{this.props.next}
...
);
}
});
...

p.S：如果您使用的是最新版本的react router，则可能需要使用

this.context.router.transitiono

而不是

this.context.transitiono

。此代码适用于react路由器版本0.12.X.

react路由器v5-react 16.8+带挂钩（2020年9月23日更新） 如果您正在利用，您可以利用React Router v5提供的

useHistory

API

import React, {useCallback} from 'react';
import {useHistory} from 'react-router-dom';

export default function StackOverflowExample() {
  const history = useHistory();
  const handleOnClick = useCallback(() => history.push('/sample'), [history]);

  return (
    <button type="button" onClick={handleOnClick}>
      Go home
    </button>
  );
}

React路由器v4-重定向组件 v4推荐的方法是允许渲染方法捕获重定向。使用状态或道具来确定是否需要显示重定向组件（然后触发重定向）

这就是

在发动机罩下的工作原理

参考：

React Router v4-外部变异历史对象 如果仍然需要执行类似于v2实现的操作，则可以创建

浏览器路由器

的副本，然后将

历史

作为可导出常量公开。下面是一个基本的例子，但如果需要的话，您可以将其组合成可定制的道具。在生命周期方面有一些值得注意的警告，但它应该总是重新启动路由器，就像在v2中一样。这对于操作函数发出API请求后的重定向非常有用

// browser router file...
import createHistory from 'history/createBrowserHistory';
import { Router } from 'react-router';

export const history = createHistory();

export default class BrowserRouter extends Component {
  render() {
    return <Router history={history} children={this.props.children} />
  }
}

// your main file...
import BrowserRouter from './relative/path/to/BrowserRouter';
import { render } from 'react-dom';

render(
  <BrowserRouter>
    <App/>
  </BrowserRouter>
);

// some file... where you don't have React instance references
import { history } from './relative/path/to/BrowserRouter';

history.push('/sample');

参考资料：

React路由器4 您可以通过v4中的上下文轻松调用push方法：

this.context.router.push（this.props.exitPath）

其中上下文是：

static contextTypes = {
    router: React.PropTypes.object,
};

React路由器4包括一个允许您通过
this.props
访问
历史
对象的

import React, {Component} from 'react'
import {withRouter} from 'react-router-dom'

class Foo extends Component {
  constructor(props) {
    super(props)

    this.goHome = this.goHome.bind(this)
  }

  goHome() {
    this.props.history.push('/')
  }

  render() {
    <div className="foo">
      <button onClick={this.goHome} />
    </div>
  }
}

export default withRouter(Foo)

import React，{Component}来自“React”
从“react router dom”导入{withRouter}
类Foo扩展组件{
建造师（道具）{
超级（道具）
this.goHome=this.goHome.bind（this）
}
goHome（）{
this.props.history.push（“/”）
}
render（）{
}
}
使用路由器导出默认值（Foo）
这是JS:）这仍然有效

var linkToClick = document.getElementById('something');
linkToClick.click();

<Link id="something" to={/somewhaere}> the link </Link>

var linkToClick=document.getElementById（'something'）；
linkToClick.click（）；
链接

在版本5.x中，您可以使用

反应路由器dom的挂钩：

// Sample extracted from https://reacttraining.com/react-router/core/api/Hooks/usehistory
import { useHistory } from "react-router-dom";

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

//从中提取的样本https://reacttraining.com/react-router/core/api/Hooks/usehistory
从“react router dom”导入{useHistory}；
函数HomeButton（）{
const history=useHistory（）；
函数handleClick（）{
历史推送（“/主页”）；
}
返回(
回家吧
);
}
如果您想
扩展
链接
组件来利用它的
onClick（）
处理程序中的一些逻辑，下面是方法：

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

// Extend react-router-dom Link to include a function for validation.
class LinkExtra extends Link {
  render() {
    const linkMarkup = super.render();
    const { validation, ...rest} = linkMarkup.props; // Filter out props for <a>.
    const onclick = event => {
      if (!this.props.validation || this.props.validation()) {
        this.handleClick(event);
      } else {
        event.preventDefault();
        console.log("Failed validation");
      }
    }

    return(
      <a {...rest} onClick={onclick} />
    )
  }
}

export default LinkExtra;

从“React”导入React；
从“react router dom”导入{Link}；
//扩展react router dom链接以包含用于验证的函数。
类LinkExtra扩展了链接{
render（）{
const linkMarkup=super.render（）；
const{validation，…rest}=linkMarkup.props；//筛选出的属性。
const onclick=event=>{
如果（！this.props.validation | this.props.validation（））{
这是一个“handleClick”（事件）；
}否则{
event.preventDefault（）；
console.log（“验证失败”）；
}
}
返回(
)
}
}
导出默认LinkExtra；

用法

false}>下一步
随着代码行的变化，如果您复制详细信息并在此处解释您的答案，您的答案会更好。另外，
assign
不是一个属性，它是一个函数
static contextTypes = {
    router: React.PropTypes.object,
};

import React, {Component} from 'react'
import {withRouter} from 'react-router-dom'

class Foo extends Component {
  constructor(props) {
    super(props)

    this.goHome = this.goHome.bind(this)
  }

  goHome() {
    this.props.history.push('/')
  }

  render() {
    <div className="foo">
      <button onClick={this.goHome} />
    </div>
  }
}

export default withRouter(Foo)

var linkToClick = document.getElementById('something');
linkToClick.click();

<Link id="something" to={/somewhaere}> the link </Link>

// Sample extracted from https://reacttraining.com/react-router/core/api/Hooks/usehistory
import { useHistory } from "react-router-dom";

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

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

// Extend react-router-dom Link to include a function for validation.
class LinkExtra extends Link {
  render() {
    const linkMarkup = super.render();
    const { validation, ...rest} = linkMarkup.props; // Filter out props for <a>.
    const onclick = event => {
      if (!this.props.validation || this.props.validation()) {
        this.handleClick(event);
      } else {
        event.preventDefault();
        console.log("Failed validation");
      }
    }

    return(
      <a {...rest} onClick={onclick} />
    )
  }
}

export default LinkExtra;

<LinkExtra to="/mypage" validation={() => false}>Next</LinkExtra>