reactjs 如何在React-router中手动调用Link？

pbwdgjma 于 2023-01-02 发布在 React

关注(0)|答案(9)|浏览(286)

我有一个组件，通过props从react-router接收<Link/>对象。每当用户单击此组件内的“下一步”按钮时，我希望手动调用<Link/>对象。
现在，我使用 refs 访问支持示例，并手动单击<Link/>生成的'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>
         ...
      );
   }
});
...

这是我想要的代码：

//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>
         ...
      );
   }
});
...

reactjs

来源：https://stackoverflow.com/questions/29244731/how-to-manually-invoke-link-in-react-router

9条答案

按热度按时间

pw136qt21#

React工艺路线v6-React 17+（更新日期：2022年1月14日）

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

export default function StackOverflowExample() {
  const navigate = useNavigate();
  const handleOnClick = useCallback(() => navigate('/sample', {replace: true}), [navigate]);

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

注意：对于这个答案，v6和v5之间的一个主要变化是useNavigate现在是首选的React钩子。useHistory已经过时，不推荐使用。

React工艺路线v5-带钩的React 16.8 +

如果您正在利用React Hooks，则可以利用来自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>
  );
}

如果不想使用useCallback，编写单击处理程序的另一种方法是

const handleOnClick = () => history.push('/sample');

React路由器v4-重定向组件

v4推荐的方法是允许你的render方法捕获重定向。使用状态或属性来决定是否需要显示重定向组件（然后触发重定向）。

import { Redirect } from 'react-router';

// ... your class implementation

handleOnClick = () => {
  // some action...
  // then redirect
  this.setState({redirect: true});
}

render() {
  if (this.state.redirect) {
    return <Redirect push to="/sample" />;
  }

  return <button onClick={this.handleOnClick} type="button">Button</button>;
}

参考：https://reacttraining.com/react-router/web/api/Redirect

React路由器v4-参考路由器上下文

您还可以利用向React组件公开的Router的上下文。

static contextTypes = {
  router: PropTypes.shape({
    history: PropTypes.shape({
      push: PropTypes.func.isRequired,
      replace: PropTypes.func.isRequired
    }).isRequired,
    staticContext: PropTypes.object
  }).isRequired
};

handleOnClick = () => {
  this.context.router.push('/sample');
}

这就是<Redirect />的工作原理。
参考：https：//github.com/ReactTraining/React路由器/blob/主服务器/包/React路由器/模块/重定向. js#L46，L60

React路由器v4-外部变更历史对象

如果你仍然需要做一些类似于v2的实现，你可以创建一个BrowserRouter的副本，然后把history公开为一个可导出的常量。下面是一个基本的例子，但是如果需要的话，你可以组合它来注入可定制的 prop 。生命周期有一些注意事项，但是它应该总是重新呈现路由器。就像在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路由器v2

将新状态推送到browserHistory示例：

import {browserHistory} from 'react-router';
// ...
browserHistory.push('/sample');

参考：https://github.com/reactjs/react-router/blob/master/docs/guides/NavigatingOutsideOfComponents.md

赞(0）回复(0）举报 2023-01-02

yhived7q2#

React Router 4包含一个withRouter HOC，它允许您通过this.props访问history对象：

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)

赞(0）回复(0）举报 2023-01-02

5cnsuln73#

在版本5.x中，可以使用react-router-dom的useHistory钩子：

// 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>
  );
}

赞(0）回复(0）举报 2023-01-02

sg3maiej4#

https://github.com/rackt/react-router/blob/bf89168acb30b6dc9b0244360bcbac5081cf6b38/examples/transitions/app.js#L50
或者你甚至可以尝试执行onClick this（更暴力的解决方案）：

window.location.assign("/sample");

赞(0）回复(0）举报 2023-01-02

bzzcjhmw5#

这里的答案已经过时了。

React工艺路线6

useHistory已过时v6使用useNavigate挂接代替。

import { useNavigate } from 'react-router-dom'

const navigate = useNavigate()

navigate(`/somewhere`, { replace: true })

赞(0）回复(0）举报 2023-01-02

bvjveswy6#

好吧，我想我能找到一个合适的解决办法。
现在，我发送的不是<Link/>作为prop到Document，而是<NextLink/>，它是一个自定义的react-router Link Package 器，这样，我就可以将右箭头作为Link结构的一部分，同时避免将路由代码放在Document对象中。
更新后的代码如下所示：

//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>
         ...
      );
   }
});
...

P.S：如果您使用的是最新版本的react-router，您可能需要使用this.context.router.transitionTo而不是this.context.transitionTo。此代码适用于react-router版本0.12.X。

赞(0）回复(0）举报 2023-01-02

wxclj1h57#

React工艺路线4

您可以通过v4中的上下文轻松调用push方法：
第一个月
其中上下文为：

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

赞(0）回复(0）举报 2023-01-02

lc8prwob8#

如果您希望extendLink组件以利用其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;

用途

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

赞(0）回复(0）举报 2023-01-02

uz75evzq9#

再一次，这是JS：）这仍然有效。

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

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

赞(0）回复(0）举报 2023-01-02

我来回答

reactjs 如何在React-router中手动调用Link？

9条答案

React工艺路线v6-React 17+（更新日期：2022年1月14日）

React工艺路线v5-带钩的React 16.8 +

React路由器v4-重定向组件

React路由器v4-参考路由器上下文

React路由器v4-外部变更历史对象

React路由器v2

React工艺路线6

React工艺路线4

相关问题

热门标签

最新问答