reactjs - Programmatically navig using React router

96

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 { withRouter } from 'react-router-dom' // this also works with react-router-native  const Button = withRouter(({ history }) => (   <button     type='button'     onClick={() => { history.push('/new-location') }}   >     Click Me!   </button> )) 

import { Route } from 'react-router-dom'  const Button = () => (   <Route render={({ history}) => (     <button       type='button'       onClick={() => { history.push('/new-location') }}     >       Click Me!     </button>   )} /> ) 

const Button = (props, context) => (   <button     type='button'     onClick={() => {       // context.history.push === history.push       context.history.push('/new-location')     }}   >     Click Me!   </button> )  // you need to specify the context type so that it // is available within the component Button.contextTypes = {   history: React.PropTypes.shape({     push: React.PropTypes.func.isRequired   }) } 

83

import { useNavigate } from "react-router-dom";  function SignupForm() {   let navigate = useNavigate();    async function handleSubmit(event) {     event.preventDefault();     await submitForm(event.target);     navigate("../success", { replace: true });   }    return <form onSubmit={handleSubmit}>{/* ... */}</form>; } 

import { useHistory } from "react-router-dom";  function HomeButton() {   let history = useHistory();   // use history.push('/some/path') here }; 

class Example extends React.Component {    // use `this.props.history.push('/some/path')` here }; 

class Example extends React.Component {    // use `this.props.router.push('/some/path')` here }; 

import { withRouter } from 'react-router';  class Example extends React.Component {    // use `this.props.router.push('/some/path')` here };  // Export the decorated class var DecoratedExample = withRouter(Example);  // PropTypes Example.propTypes = {   router: React.PropTypes.shape({     push: React.PropTypes.func.isRequired   }).isRequired }; 

var Example = React.createClass({   mixins: [ History ],   navigateToHelpPage () {     this.history.pushState(null, `/help`);   } }) 

import React from 'react'; import {Navigation} from 'react-router';  let Authentication = React.createClass({   mixins: [Navigation],    handleClick(e) {     e.preventDefault();      this.transitionTo('/');   },    render(){     return (<div onClick={this.handleClick}>Click me!</div>);   } }); 

import React from 'react';  export default class Authentication extends React.Component {   constructor(props) {     super(props);     this.handleClick = this.handleClick.bind(this);   }    handleClick(e) {     e.preventDefault();      this.context.router.transitionTo('/');   }    render(){     return (<div onClick={this.handleClick}>Click me!</div>);   } }  Authentication.contextTypes = {   router: React.PropTypes.func.isRequired }; 

import { goBack } from 'react-router-redux'  export const onBackPress = () => (dispatch) => dispatch(goBack()) 

<button   disabled={submitting}   className="cancel_button"   onClick={(e) => {     e.preventDefault()     this.props.onBackPress()   }} >   CANCEL </button> 

75

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

this.props.history.push('/some/path'); 

import { push } from 'react-router-redux'; this.props.dispatch(push('/some/path')); 

68

import React from 'react';  export default class MyComponent extends React.Component {   navigateToPage = () => {     this.context.router.push('/my-route')   };    render() {     return (       <button onClick={this.navigateToPage}>Go!</button>     );   } }  MyComponent.contextTypes = {   router: React.PropTypes.object.isRequired } 

53

import createBrowserHistory from 'history/createBrowserHistory' export default createBrowserHistory() 

import React, { Component } from 'react'; import history from './history';  class BasicComponent extends Component {      goToIndex(e){         e.preventDefault();         history.push('/');     }      render(){         return <a href="#" onClick={this.goToIndex}>Previous</a>;     } } 

import React, { Component } from 'react';  class BasicComponent extends Component {      navigate(e){         e.preventDefault();         this.props.history.push('/url');     }      render(){         return <a href="#" onClick={this.navigate}>Previous</a>;     } }