时间戳

首页 > 解决方案 > 在 Safari 浏览器 (react-router-dom) 上按后退/前进时状态持续存在

javascript - 在 Safari 浏览器 (react-router-dom) 上按后退/前进时状态持续存在

问题描述

我目前正在使用 Reactjs，由于某种原因，当按下 Safari 浏览器上的后退/前进按钮时，我遇到了状态管理问题，它使组件与以前完全相同，但 URL 会更新。

注意：在 iPhone 上滑动时也会发生这种情况。

我可以通过以下方式解决此问题：

window.onpageshow = function(event) {
    if (event.persisted) {
        window.location.reload() 
    }
};

我正在寻找一种不同的解决方案，因为这似乎很老套，并且会进行轻微的双重刷新，并且在发生时很明显。

用于路由器的库：react-router-dom

React Dom 渲染：

ReactDOM.render(
    <AuthProvider>
        <IntercomProvider autoBoot={true} appId={''}>
            <App />
        </IntercomProvider>
    </AuthProvider>,
    document.getElementById('root')
);

交换机路由：

import React from "react";

import {
    BrowserRouter as Router,
    Switch,
    Route
} from "react-router-dom";

export default function App() {
    return (
        <React.Suspense fallback={<span>Loading...</span>}>
            <Router>
                <ReactNotification />

                <React.StrictMode>
                    <Switch>
                        <Route exact path="/" component={Home} />

                        {singleRouting.map((route, i) => (
                            <RouteWithSubRoutes key={i} {...route} />
                        ))}

                        {boilerAdviceRouting.map((route, i) => (
                            <RouteWithSubRoutes key={i} {...route} />
                        ))}

                        {boilerQuotesRouting.map((route, i) => (
                            <RouteWithSubRoutes key={i} {...route} />
                        ))}

                        <Route path="*">
                            <Error />
                        </Route>
                    </Switch>
                    <GoogleAnalyticsLocation />
                </React.StrictMode>
            </Router>
        </React.Suspense>
    );
}

const RouteWithSubRoutes = (route) => {
    return (
        <Route
            exact={route.exact || undefined}
            path={route.path}
            render={(props) => (
                // pass the sub-routes down to keep nesting
                <route.component {...props} />
            )}
        />
    );
}

更新：

经过研究，除了刷新页面，我找不到任何解决方案。我必须在页面被重定向之前向所有操作按钮添加回调以重置状态，这不是最好的解决方案，但至少在有人提出实际答案之前它会得到解决。

标签： javascriptreactjsreact-router-dom

解决方案

我认为问题在于兄弟姐妹中键的重用，而键在兄弟姐妹中必须是唯一的。下面的工作吗？

                        {singleRouting.map((route, i) => (
                            <RouteWithSubRoutes key={"s"+i} {...route} />
                        ))}

                        {boilerAdviceRouting.map((route, i) => (
                            <RouteWithSubRoutes key={"a"+i} {...route} />
                        ))}

                        {boilerQuotesRouting.map((route, i) => (
                            <RouteWithSubRoutes key={"q"+i} {...route} />
                        ))}

推荐阅读