尝试输入反应应用程序路由时出现 404 [英] 404 when trying to enter a react app route

问题描述

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

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

我的应用根目录用

包裹

function App() {返回 (<提供者商店={商店}><路由器><React.Fragment><CssBaseline/><Header title="exampletitle"/><MobileHeader/><主要/><底部导航栏/></React.Fragment></路由器></提供者>);}

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

function Main(props) {返回 (<div><开关><路由精确路径="/" component={Homepage}/><路由精确路径="/about" component={About}/><路由精确路径="/signup" component={Registerpage}/><路由精确路径="/ap" component={Adminpage}/><路由精确路径="/signin" component={SignIn}/><路由精确路径="/userpanel" component={UserPanelPage}/><Route path="/article/:category" component={Articlepage}/><Route path="/articlepage/:id" component={ReadArticlePage}/></开关>

);}

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

解决方案

如果当您使用 <Link> 和 history.push 导航时，您的应用程序适用于所有路线代码>，但是当您输入 http://example.com404 Not Founda>，直接在浏览器中输入 http://example.com/articles，您需要:

<块引用>

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

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

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

另外，检查 notes-on-client-side-routing 和 如何在 cPanel 上部署.

I just deployed my react app build on c-panel. The app includes different routes and everytime I try to get to one of them I get 404 Not found. For example if I try to get to http://example.com/ it will enter the website, and if I'll press on a button which links me tohttp://example.com/articles it will work. But If I'll try to get http://example.com/articles from a link that I shared or just typing this address I'll get 404 Not found. This is not happening when I'm running the develope mode on localhost.

I changed the homepage url - "homepage": "http://example.com", in package.json and it did not effect.

My app root is wrapped with <Router>

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

And this is Main.js component which is maneuvered by the routes.

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>
  );
}

Can someone give me a clue how to make those pages load when I enter them directly by their link?

解决方案

If your application is working for all the routes when you navigate using <Link> and history.push but throwing 404 Not Found when you type a URL other than http://example.com, say http://example.com/articles, directly in your browser, you need to:

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

You can do this in one of the following ways:

1. Add a custom 404 page which redirects you to index.html.
2. If your hosting solution, c-panel, provides an error page setting for the deployment, provide index.html as the error page.
3. Use HashRouter from react-router. Check HashRouter Solution and What's HashRouter.

Also, check notes-on-client-side-routing and How to deploy on cPanel.

这篇关于尝试输入反应应用程序路由时出现 404的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！