How to jump in react 4.0 route

藏色散人
Release: 2023-01-06 09:50:03
Original
1597 people have browsed it

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
Copy after login

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')
Copy after login

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>
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template