How to use history redirection in React Router

In react-router, the jump in the component can be used with <Link>

But how to jump outside the component requires the use of react routing history

The replace method is used in the same way as the push method. The function of replace is to replace the current history record.
go, this method is used to move forward or backward, history.go(-1);
goBack, this method is used to go back, history.goBack();
goForward, this method is used to move forward, history.goForward();

1.hook

import {useHistory} from 'react-router-dom';
function goPage(e) {
 history.push({
 pathname: "/home",
 state: {id: 1}
 });
}

pathname is the routing address, state can be passed as a parameter

Get parameters:

import {useLocation} from 'react-router-dom';
function getParams(){
let location = useLocation();
let id = location.state.id;
}

2. Class component

import React from 'react';
import {createBrowserHistory} from "history";
 
class App extends React.Component {
  constructor(props) {
      super(props);
    }
   goPage() {
 let history = createBrowserHistory()
 history.push({
 pathname: "/home",
 state: {id: 1}
 });
    history.go();
 }
  render() {return null;}
 
}

If history.go is not called, the route changes, but the page does not jump.

This is the end of this article about how to use history jump in React Router. For more relevant React Router history jump content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!