Home  >  Article  >  Web Front-end  >  How to jump in react 4.0 route

How to jump in react 4.0 route

藏色散人
藏色散人Original
2023-01-06 09:50:031591browse

React4.0 routing jump method: 1. Install "history" through "npm install history --save"; 2. In the js file corresponding to the place to be jumped, introduce createHashHistory and execute the code "import { createHashHistory } from 'history'createHashHistory().push('/share')" can be done.

How to jump in react 4.0 route

The operating environment of this tutorial: Windows 10 system, React-Router v4.0 version, Dell G3 computer.

How to redirect routes in react 4.0?

React-Router v4.0 hashRouter uses js to jump

The use of hashRouter is no longer recommended on React-Router v4.0, and browserRouter is mainly recommended, but because the use of browserRouter requires the cooperation of the server It may cause inconvenience, but sometimes you still need to use hashRouter.

The following are the implementation steps of hashRouter jumping in js mode in v4.0 React-Router.

v4.0 strips off history, so to operate history, you need to install the support package:

npm install history --save

In the js file corresponding to the place you want to jump, introduce createHashHistory and execute the code to jump Go to '/share' for example:

import { createHashHistory } from 'history'
createHashHistory().push('/share')

is ok.

Before using the above method to jump, you need to confirm that Router has been defined. You can refer to the following code:

import { HashRouter as Router, Route, Switch } from 'react-router-dom'
...
<Router>
  <App>
    <Switch>
      <Route path=&#39;/index&#39; component={显示的组件1}>
      <Route path=&#39;/share&#39; component={显示的组件2}>
      ...
    </Switch>
  </App>
</Router>

Recommended learning: "react video tutorial"

The above is the detailed content of How to jump in react 4.0 route. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn