已解决：找不到反应路由器重新加载页面

与 React Router reload page not found 相关的主要问题是，当用户刷新页面时，浏览器将尝试向服务器请求当前 URL。 但是由于React Router是客户端路由，URL没有对应的服务端路由，所以会返回404 Not Found错误。 如果用户希望某些内容出现在刷新时，这可能会特别成问题。

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

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />

      {/* Page Not Found */}
      <Route render={() => (<h1>Page not found</h1>)} />

    </Switch>
  </Router>  
);

// 第 1 行：此行从 react-router-dom 库中导入 BrowserRouter、Route 和 Switch 组件。

// 第 3 行：这一行定义了一个名为 App 的函数，它返回 JSX 代码。

// 第 5 行：这一行将整个 JSX 代码包装在 react-router-dom 的 Router 组件中。

// 第 6 行：此行将所有路由包装在来自 react-router-dom 的 Switch 组件中。

// Lines 7 – 9: 这些行分别为'/' 和'/about' 定义了两条路由及其各自的组件（Home 和About）。

// Lines 11 – 12: 这些行定义了一个路由，当没有其他路由匹配时，它会呈现一个 h1 标签，上面写着“Page not found”。

找不到页面错误

React Router 中的页面未找到错误是当用户尝试访问不存在的页面或路由时发生的错误。 如果用户输入错误的 URL，或者如果他们试图访问的页面已被删除或移动，就会发生这种情况。 在 React Router 中，这个错误是通过使用 组件的 render prop 并传入一个返回 404 页面的函数。 这允许开发人员创建包含他们想要的任何内容的自定义 404 页面，例如有用的链接或道歉消息。

我如何处理在反应路由器中找不到页面

使用 React Router 时，您可以通过创建自定义路由来处理未找到的页面，该路由将在 URL 与任何现有路由不匹配时呈现 NotFound 组件。 为此，您需要创建一个路径设置为“*”的新路由并渲染您的 NotFound 组件。

例如：

} />

这将匹配任何尚未与现有路由匹配的 URL，并呈现您的 NotFound 组件。

如何强制重新加载反应页面

在 React Router 中，您可以通过对历史对象使用 replace 方法来强制重新加载页面。 这将用新条目替换历史堆栈中的当前条目，从而强制重新加载页面。 要使用此方法，您需要首先访问历史对象。 您可以通过在创建路由器组件时将其作为道具传递来做到这一点：

const AppRouter = () => (

{/* 你的路线在这里 */}

);

一旦你访问了历史对象，你就可以像这样使用它的 replace 方法：

history.replace('/some-route');

相关文章：

发表评论