尝试输入react应用程序路由时出现 404

IT技术 reactjs react-router nodes
2021-04-05 00:36:00

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

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

我的应用程序根被包裹 <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>
  );
}

当我通过他们的链接直接输入这些页面时，有人能给我一个提示如何让这些页面加载吗？

2个回答

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

通过重定向到 index.html 页面来教您的服务器处理 404 。

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

  1. 添加一个自定义 404 页面，将您重定向到 index.html。
  2. 如果您的托管解决方案 c-panel为部署提供错误页面设置，请提供 index.html 作为错误页面。
  3. 使用react-router 中的HashRouter。检查HashRouter 解决方案和什么是 HashRouter。

另外，请检查客户端路由的注释和如何在 cPanel 上部署。

以下是如何在nginx和apache2服务器上执行此操作。
2021-06-13 00:36:00

我想我有点晚了，但最好的解决方案是：使用 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 页面。

其它你可能感兴趣的问题
上一篇在 React-Router v4 中以编程方式导航 下一篇未使用 create-react-app 提供模板