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

Question

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

我更改了主页 url - "homepage": "http://example.com",在 package.json 中，它没有影响。

我的应用程序根目录包含 <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>
  );
}

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

Answer 1

如果您的应用程序在您使用 <Link> 导航时适用于所有路线和 history.push但扔 404 未找到 当您键入除 http://example.com 之外的 URL 时，说 http://example.com/articles ，直接在您的浏览器中，您需要:

Teach your server to handle 404s by redirecting to the index.html page.

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

添加 自定义404页面这会将您重定向到 index.html。

如果您的托管解决方案 c-panel 提供 错误页面设置对于部署，提供 index.html 作为错误页面。

使用 HashRouter来自 react 路由器。查询 HashRouter Solution和 What's HashRouter .

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