尝试输入反应应用程序路由时出现 404答案

【问题标题】：404 when trying to enter a react app route尝试输入反应应用程序路由时出现 404
【发布时间】：2020-09-14 17:57:40
【问题描述】：

我刚刚在 c-panel 上部署了我的 react 应用构建。该应用程序包含不同的路线，每次我尝试到达其中之一时，我都会得到404 Not found。例如，如果我尝试访问http://example.com/，它将进入网站，如果我按下链接到http://example.com/articles 的按钮，它将起作用。但是，如果我尝试从我共享的链接中获取http://example.com/articles，或者只是输入此地址，我将得到404 Not found。当我在 localhost 上运行开发模式时，不会发生这种情况。

我更改了 package.json 中的主页 url - "homepage": "http://example.com", 并没有效果。

我的应用根目录用 <Router> 包裹

function App() {
  return (
    <Provider store={store}>
      <Router>
        <React.Fragment>
          <CssBaseline />
          <Header title="exampletitle" />
          <MobileHeader />
          <Main />
          <BottomNavbar />
        </React.Fragment>
      </Router>
    </Provider>
  );
}

这是由路由操纵的 Main.js 组件。

function Main(props) {
  return (
    <div>
      <Switch>
        <Route exact path="/" component={Homepage} />
        <Route exact path="/about" component={About} />
        <Route exact path="/signup" component={Registerpage} />
        <Route exact path="/ap" component={Adminpage} />
        <Route exact path="/signin" component={SignIn} />
        <Route exact path="/userpanel" component={UserPanelPage} />
        <Route path="/article/:category" component={Articlepage} />
        <Route path="/articlepage/:id" component={ReadArticlePage} />
      </Switch>
    </div>
  );
}

当我通过链接直接输入这些页面时，有人可以告诉我如何加载这些页面吗？

【问题讨论】：

您拥有最接近articles 的path="/article/:category"。可能是笔误。或者它尝试从后端渲染路由，这就是为什么它是 404。
@norbitrial 我不是专门谈论这条路线。所有路线都在做同样的事情。
可能是后端试图寻找路线，我已经解释了类似的场景in this answer，也许这有助于理解发生了什么。

标签： reactjs react-router nodes

【解决方案1】：

如果您的应用程序在您使用<Link> 和history.push 导航时适用于所有路由，但在您键入http://example.com 以外的URL 时抛出404 Not Found，例如http://example.com/articles ，直接在您的浏览器中，您需要：

通过重定向到 index.html 页面。

您可以通过以下方式之一执行此操作：

添加一个自定义 404 页面，将您重定向到 index.html。
如果您的托管解决方案 c-panel 为部署提供了错误页面设置，请提供 index.html 作为错误页面。
使用来自 react-router 的HashRouter。检查HashRouter Solution 和What's HashRouter。

另外，请检查notes-on-client-side-routing 和How to deploy on cPanel。

【讨论】：

这是在nginx 和apache2 服务器上的操作方法。

【解决方案2】：

我想我有点晚了，但最好的解决方案是：使用 HashRouter 代替 BrowserRouter 并使用此源代码将 404.html 添加到公共文件夹：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
    name="viewport"
    content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1"/>
    <title>Your Page Title</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script>
    var path = window.location.pathname;
    path = path[0] + "#" + path;
    var url = window.location.protocol + "//" + window.location.hostname + path;
    //document.write("Redirecting To: "+url);
    window.location.href=url;
    </script>
  </body>
</html>

所以现在，如果您访问http://example.com/articles，它几乎会立即自动重定向到http://example.com/#/articles，您甚至都不会注意到并正确渲染而不会出现任何 404 错误！！！。

注意：如果您使用的是 github，则此答案适用，如果您使用的是 cpanel，请使用带有上述源代码的自定义 404 页面。

【讨论】：