javascript - 有没有办法强制 react-router-dom 在页面刷新时重定向页面？

Question

我在 react 应用程序上使用 react-router-dom 来构建网站。我想知道，当一个人选择刷新页面时，是否可以重定向当前页面？

这是我提示用户刷新页面的工作代码（我在另一篇堆栈溢出文章中找到了它）：

    window.addEventListener("beforeunload", function (e) {
        let confirmationMessage = 'It looks like you have been editing something. '
            + 'If you leave before saving, test will be lost.';

        (e || window.event).returnValue = confirmationMessage;
        return confirmationMessage;
    });

我的当前站点 URL 以“/data-gathering”结尾，但不幸的是，它需要从前一页输入，否则会中断。如果用户刷新页面，如果他们在该页面上，它会重置网站。所以我想知道我们是否可以将它路由到“/index.html”。

我努力了：

    //1st Attempt
    const reroute = (
      <Route exact path="/data-gathering">
               <Redirect to="/index.html" />
      </Route>
    
    )
    
    window.addEventListener("beforeunload", function (e) {
        let confirmationMessage = 'It looks like you have been editing something. '
            + 'If you leave before saving, test will be lost.';

        (e || window.event).returnValue = confirmationMessage;
        return reroute;
    });
    
    //__________________________________________________________________
    //2nd Attempt
        window.addEventListener("beforeunload", function (e) {
        let confirmationMessage = 'It looks like you have been editing something. '
            + 'If you leave before saving, test will be los5t.';

        (e || window.event).returnValue = confirmationMessage;
        return (
        <Route exact path="/data-gathering">
               <Redirect to="/index.html" />
        </Route>
        )
    });
    

但两者都失败了。关于如何使这项工作的任何想法？

标签： javascriptreactjsreact-router-dom

Answer 1

这种方法的问题在于，如果用户直接导航到该路线，例如因为他们为它添加了书签或在 url 栏中手动输入了路线，它将无法工作。

我会采用不同的方法来解决这个问题。呈现的组件/data-gathering应该检查​​所需的值是否可用，如果不可用，则重定向到允许您输入所需数据的页面（或另一个合理的默认值）。像这样的东西：

const DataGathering = ({data}) => {
  if (!data) return <Redirect to="/enter-data" />

  // ... render whatever should be rendered if data is already there

}

当然，如果用户尝试离开或刷新页面以警告他们数据丢失，您仍然可以显示警告。但是您不必重定向它们，因为您的组件在没有所需数据的情况下呈现时会这样做。