What should I do if the value disappears after the react page is refreshed?

The solution to the value disappearing after the react page passes a value and refreshes: 1. Refresh the page and check whether the data in the state will be cleared; 2. Pass "const name = location.query.name; const id = location. query.id;" method adds parameters in the jump link, so that the data will not be lost after refreshing the page while passing parameters.

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

What should I do if the value disappears after the react page is refreshed?

Solve the problem of parameter loss after react route jump parameters and refresh the page

import { useHistory } from 'react-router-dom';
const history = useHistory();
 
history.push({
      pathname: '/details',
      state: {
        name: name,
        id: id,
      },
});

Using state in history can indeed pass parameters, and it can be done when entering the page It displays normally, but after refreshing the page, the data in the state will be cleared, and the page cannot display normally.

import { useHistory } from 'react-router-dom';
const history = useHistory();
 
history.push({
      pathname: '/details',
      query: {
        name: name,
        id: id,
      },
});

Using query is to add parameters in the jump link. The data can be passed while refreshing the page without losing the data. However, if too many parameters are passed, the link will be very long.

import { useLocation } from 'react-router-dom';
const location = useLocation();
const name = location.query.name;
const id = location.query.id;
// 获取state参数的写法
const name = location.state.name;
const id = location.state.id;

This is the way to get parameters on the jump page

(Personal testing is effective, but there will be type errors)

Recommended learning: "react video tutorial 》

The above is the detailed content of What should I do if the value disappears after the react page is refreshed?. For more information, please follow other related articles on the PHP Chinese website!