如何在页面重新加载时清除 react-router 中的 location.state？

Question

我目前正在通过我的 state 更改路线，如下所示：

<Link to={{
           pathname:`/transactions/${props.transaction.id}`,
           state: {transaction: props.transaction}
         }}> View Details </Link>

我的逻辑是，如果“location.state.transaction”存在，则不要获取新数据，否则获取数据。

现在的缺陷是重新加载页面时。 如果用户重新加载页面，应用程序需要获取新数据。 我认为如果重新加载“location.state”会被清除，但显然 state 保存在 sessionStorage 中。

我该如何解决这个问题？ 我每次都可以获取新数据，但单击“查看详细信息”链接时不应获取数据。

Answer 1

我也遇到了这个问题，我最终做的是从 react router 检索浏览器历史记录并清除特定的 location.state 属性。 所以在你的情况下，它将是transaction 。 我在componentDidMount此操作，以便在您第一次访问该页面后，该属性不再存在，

import createHistory from 'history/createBrowserHistory'

...

componentDidMount(){
    const history = createHistory();
    if (history.location.state && history.location.state.transaction) {
        let state = { ...history.location.state };
        delete state.transaction;
        history.replace({ ...history.location, state });
    }
}

Answer 2

不使用 3 方库有更好的方法。

我们可以使用history.replace()

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/history.md

componentDidMount(){
 const {location,history} = this.props;
 //use the state via location.state
 //and replace the state via
 history.replace() 
}

Answer 3

如果您使用的是window.history钩子，则可以直接使用window.history来清除状态而不触发重新渲染。 这比使用useHistory钩子的replace方法useHistory ，后者会导致您的组件重新渲染。

window.history.replaceState({}, document.title)

Answer 4

使用状态后，再次调度一个状态为空的动作来清理状态。

this.props.dispatch(replace({
  ...this.props.location,
  state: undefined
});

Answer 5

在 React Router V6 中，您可以使用 useNavigate() 清除当前路径的 state：

import React, { useEffect } from "react";
import { useLocation, useNavigate } from "react-router-dom";
useEffect(() => {
  const location = useLocation();
  const navigate = useNavigate();
  navigate(location.pathname, {}); 
  // reload and pass empty object to clear state
  // we can also use replace option: ..., {replace: true}
}, []);

Answer 6

history.replace({ state: {} })<\/code> 。 如果您还想将用户重定向到某个地方，请使用history.replace({ pathname: '\/profile\/me', state: {} })<\/code>

"

Answer 7

我建议不要在这里使用location道具，而是创建一个带有路径的 Route（无论您在何处定义它们）： /transactions/:transactionId ，并在props.match.params.transactionId内的props.match.params.transactionId捕获transactionId目标组件。 然后在componentDidMount您可以分派 API 请求操作以获取交易。 不要忘记从链接的道具中删除state参数。

Answer 8

这就是可能的工作。

const history = useHistory();
// consume the history.location.state and reset the state
useEffect(() => {
    history.replace(`/transactions/${history.location.state.transaction.id}`, {});
  }, []);

Answer 9

在React Router v6<\/strong>中，您可以执行以下操作：

const location = useLocation();
const navigate = useNavigate();

const state = location.state;
// Do some stuff with the state
// ...

// Clear the state after
navigate(location.pathname, { replace: true });

Answer 10

这些都不会使用 useNavigate 重置我的 state。 我必须做的是在导航上设置一个 useEffect。

...
const navigate = useNavigate()
...

useEffect(() => {
  // set state here
  ....
},[navigate]

Answer 11

useEffect(() => {
    return () => {
        window.history.replaceState({}, document.title);
    };
},[]);