React-router: how to manually call a link?

Question

I am new to ReactJS and React-Router. I have a component that receives through the props <Link/> an object from a responsive router . Whenever the user clicks the "next" button inside this component, I want to call the <Link/> object manually.

I am currently using refs to access the support instance and manually click on the 'a' tag that <Link/> generates.

Question: Is there a way to manually call a link (for example, this.props.next.go )?

This is the current code I have:

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

This is the code I would like to have:

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

Answer 1

React Router v4 - Redirect component (updated 2017/04/15)

The recommended v4 method is to allow your rendering method to intercept the redirect. Use the state or props to determine whether the redirection component (which then calls the redirection) should be displayed.

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

Link: https://reacttraining.com/react-router/web/api/Redirect

React Router v4 - Help Router Context

You can also use the Router context that appears in the React component.

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

This is how <Redirect /> works under the hood.

Link: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Redirect.js#L46,L60

React Router v4 - Object of history with an external mutation

If you still need to do something similar to the v2 implementation, you can create a copy of BrowserRouter and then set history as an exported constant. Below is a basic example, but you can build it, if necessary, using custom details. There are marked reservations with life cycles, but it should always repeat the Router, as in v2. This can be useful for redirecting after an API request from an action function.

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

Latest BrowserRouter for extension: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/BrowserRouter.js

React Router v2

Click the new state into the browserHistory instance:

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

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

Answer 2

React Router 4 includes withRouter HOC, which gives you access to the history object through 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) 

Answer 3

https://github.com/rackt/react-router/blob/bf89168acb30b6dc9b0244360bcbac5081cf6b38/examples/transitions/app.js#L50

or you can even try doing onClick this (a more cruel solution):

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

Answer 4

Well, I think I was able to find a suitable solution for this.

Now instead of sending <Link/> as prop to the Document, I send <NextLink/> , which is a custom wrapper for the Link Link router. By doing this, I can have the right arrow as part of the Link structure, while still avoiding having routing code inside the Document object.

The updated code is as follows:

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

PS . If you are using the latest reactive router, you might need this.context.router.transitionTo instead of this.context.transitionTo . This code will work just fine for relay version 0.12.X.

Answer 5

React router 4

You can easily call the push method through the context in v4:

this.context.router.push(this.props.exitPath);

where context:

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

Answer 6

again this is js :) it still works ....

 var linkToClick = document.getElementById('something'); linkToClick.click(); <Link id="something" to={/somewhaere}> the link </Link>