在浏览器（react-router-dom）中直接输入url时如何修复404错误？答案

【问题标题】：How to fix an 404 error when directly typing in the url in the browser (react-router-dom)?在浏览器（react-router-dom）中直接输入url时如何修复404错误？
【发布时间】：2021-06-01 08:19:00
【问题描述】：

我想让用户在输入例如www.page-url.com/about-us 时访问特定页面，而不是通过www.page-url.com 然后在导航栏中选择关于我们。当我输入 www.page-url.com/about-us 时，我收到 404 错误（找不到页面）。如何防止这种行为？我已经尝试了与 SO 上的问题不同的解决方案，但都没有奏效。

路由器代码：

<Router >
        <MobileNavbar />
        <Navbar />
        <Switch>
          <Route path='/' exact component={Home} />
          <Route path='/om-oss' component={AboutUs} />
          <Route path='/sponsorar' component={Sponsor} />
          <Route path='/bli-sponsor' component={BecomeSponsor} />
          <Route path='/bli-medlem' component={BecomeMember} />
          <Route path='/admin' exact component={Admin} />
          <Route path='/admin-login' exact component={AdminLogin} />
          <Route path="/admin/bytt-passord" exact component={ChangeCreds} />
          <Route path="/admin/medlemer" exact component={Members} />
          <Route path="/til-foreldre" component={Parents} />
          <Route path="/kalendar" component={Calendar} />
          <Route path="/admin/kalendar" exact component={AdminCalendar} />
        </Switch>
        <Footer />
      </Router>

【问题讨论】：

您的应用程序是如何托管的？如果您使用的是 nginx，则必须配置服务器以将请求指向您的 SPA 索引 html
您想防止显示 404 错误页面吗？在您当前的路由器配置中，请举个例子
我通过 Firebase 托管将我的应用托管到在挪威这里购买的域。我想让用户通过输入 www.page-url.com/about-us 访问例如关于我们的页面，但是当我这样做时，我得到一个 404 页面未找到错误。
您收到 404 错误，因为它没有看到任何与路径匹配的路由 /about-us

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

当用户键入一些您不支持的路线时，您可以拥有一条全部路线。将此添加到 Switch 的底部。

<Route path='*'><SomeComponent /></Route>

Catch All Routes

【讨论】：

但这是否允许用户直接访问 www.page-url.com/about-us 来访问“关于我们”页面，或者如果我不支持，是否会将用户重定向到另一个组件路线？
is 将渲染。
您是否有任何示例说明如何在上面的代码中直接访问 AboutUs 组件时避免 404 错误？我试过你的解决方案，但没有任何改变。
我已经完成了您在代码沙箱示例中所做的一切，但仍然出现 404 错误
您的链接中的答案解决了我的问题。谢谢！