entityMap|blocks|key|9tugf|text|使用状态后，再次调度状态为空的操作以清除状态。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4vgla|this.props.dispatch(replace({
++...this.props.location,
++state:+undefined
});|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

After you used the state, dispatch an action with an empty state again to clean the state.

<pre><code>this.props.dispatch(replace({
 ...this.props.location,
 state: undefined
});
</code></pre>

entityMap|blocks|key|aqaus|text|我也遇到了这个问题，我最终做的是从react路由器检索浏览器历史记录并清除特定的location.state属性。所以在你的情况下，它将是transaction。我是在|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5fahc|componentDidMount因此，在您第一次访问该页面后，该属性将不再存在，|8qra8|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+});
++++}
}|code-block|syntax|javascript^0|1X|B|0|0|H|0^^$0|$]|1|@$2|3|4|5|6|7|8|N|9|@$A|O|B|P|C|D]]|E|@]|F|$]]|$2|G|4|H|6|7|8|Q|9|@$A|R|B|S|C|D]]|E|@]|F|$]]|$2|I|4|J|6|K|8|T|9|@]|E|@]|F|$L|M]]]]

I also ran into this problem, and what I ended up doing was retrieving the browser history from react router and clearing specific location.state properties. So in your case, it would be <code>transaction</code>. I did this in <code>componentDidMount</code> so that after the first time you go to the page, that property should no longer be there,

<pre><code>import createHistory from 'history/createBrowserHistory'

...

componentDidMount(){
 const history = createHistory();
 if (history.location.state &amp;&amp; history.location.state.transaction) {
 let state = { ...history.location.state };
 delete state.transaction;
 history.replace({ ...history.location, state });
 }
}
</code></pre>

entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/history.md|blocks|key|4bio6|text|有一种更好的方法，不用使用三方库。|unstyled|depth|inlineStyleRanges|entityRanges|5fqg1|我们可以使用history.replace()|offset|length|style|CODE|fv6qr|c6gtp|componentDidMount(){
+const+{location,history}+=+this.props;
+//use+the+state+via+location.state
+//and+replace+the+state+via
+history.replace()+
}|code-block|syntax|javascript^0|0|6|H|0|0|2R|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|U|G|@]|H|@]|6|$]]|$A|I|C|J|2|E|F|V|G|@$K|W|L|X|M|N]]|H|@]|6|$]]|$A|O|C|8|2|E|F|Y|G|@]|H|@$K|Z|L|10|A|11]]|6|$]]|$A|P|C|Q|2|R|F|12|G|@]|H|@]|6|$S|T]]]]

There is better approach without using the 3 party library.

We can use <code>history.replace()</code> 

<a href="https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/history.md" rel="noreferrer">https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/history.md</a>

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

entityMap|blocks|key|bm5dl|text|我建议不要使用location在这里提供支持，但要创建具有路径的路由(无论您在何处定义它们)：/transactions/:transactionId，并捕获|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|faso9|transactionId在道具中props.match.params.transactionId|34kj1|在目标组件内部。然后在componentDidMount您可以分派API请求操作以获取事务。别忘了删除stateparam来自链接的道具。^0|7|8|1B|S|0|0|D|H|W|0|B|H|1F|5^^$0|$]|1|@$2|3|4|5|6|7|8|K|9|@$A|L|B|M|C|D]|$A|N|B|O|C|D]]|E|@]|F|$]]|$2|G|4|H|6|7|8|P|9|@$A|Q|B|R|C|D]|$A|S|B|T|C|D]]|E|@]|F|$]]|$2|I|4|J|6|7|8|U|9|@$A|V|B|W|C|D]|$A|X|B|Y|C|D]]|E|@]|F|$]]]]

I would suggest not to use the <code>location</code> prop here, but to create a Route (wherever you define them) with a path: <code>/transactions/:transactionId</code>, and to catch the <code>transactionId</code> in the prop <code>props.match.params.transactionId</code> inside of the target component. Then in the <code>componentDidMount</code> you can dispatch the API request action in order to fetch the transaction. Don't forget to delete the <code>state</code> param from the props of the Link.

entityMap|blocks|key|3u25u|text|如果你正在使用react钩子，你可以使用window.history|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|fhq2t|直接清除状态，而不触发重现。这比使用useHistory胡克的|6amvd|replace方法，这将导致组件重新呈现。|cp0e4|window.history.replaceState({},+document.title)|code-block|syntax|js^0|K|E|0|I|A|0|0|7|0^^$0|$]|1|@$2|3|4|5|6|7|8|P|9|@$A|Q|B|R|C|D]]|E|@]|F|$]]|$2|G|4|H|6|7|8|S|9|@$A|T|B|U|C|D]]|E|@]|F|$]]|$2|I|4|J|6|7|8|V|9|@$A|W|B|X|C|D]]|E|@]|F|$]]|$2|K|4|L|6|M|8|Y|9|@]|E|@]|F|$N|O]]]]

If you're using react hooks, you can use <code>window.history</code> directly to clear the state without triggering a rerender. This is better than using the <code>useHistory</code> hook's <code>replace</code> method, which would cause your component to rerender.
<pre><code>window.history.replaceState({}, document.title)
</code></pre>

entityMap|blocks|key|7h4u8|text|这就是可能起作用的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|efd90|const+history+=+useHistory();
//+consume+the+history.location.state+and+reset+the+state
useEffect(()+=>+{
++++history.replace(`/transactions/${history.location.state.transaction.id}`,+{});
++},+[]);|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

This is what might work.
<pre><code>const history = useHistory();
// consume the history.location.state and reset the state
useEffect(() =&gt; {
 history.replace(`/transactions/${history.location.state.transaction.id}`, {});
 }, []);
</code></pre>

I am currently passing my state on route change like below:

<pre><code>&lt;Link to={{
 pathname:`/transactions/${props.transaction.id}`,
 state: {transaction: props.transaction}
 }}&gt; View Details &lt;/Link&gt;
</code></pre>

My logic is that if "location.state.transaction" exists, don't fetch new data, else, fetch data.

Now the flaw is when there is a page reload. The application needs to fetch new data if the user reloads the page. I thought "location.state" would get cleared if there is a reload, but apparently the state is saved in sessionStorage.

How do I work around this? 
I could just fetch new data every time, but it should not fetch data when the 'View Details' Link is clicked.

How do I clear location.state in react-router on page reload?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

 我目前正在传递路由更改的状态，如下所示： View Details 我的逻辑是，如果"location.state.transaction“存在，则不获取新数据，否则，获取数据。 现在的缺陷是当页面重新加载时。如果用户重新加载页面，应用程序需要获取新数据。我以为如果重新加载，"location.state“就会被清除...

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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