尝试输入反应应用程序路由时出现 404
Posted
技术标签:
【中文标题】尝试输入反应应用程序路由时出现 404【英文标题】：404 when trying to enter a react app route 【发布时间】：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，也许这有助于理解发生了什么。
【参考方案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 页面。
【讨论】：
以上是关于尝试输入反应应用程序路由时出现 404的主要内容，如果未能解决你的问题，请参考以下文章