我有react .js应用程序到服务器.我正在使用nginx服务器.应用程序运行良好.但当我转到另一页时;刷新,网站不工作.显示404未找到错误.

我该怎么解决这个问题呢.

非常感谢.

推荐答案

当你的react.js个应用程序加载时,路由将由react-router在前端处理.比如说你现在http://a.com岁.然后在页面上导航到http://a.com/b.此路由更改在浏览器本身中处理.现在,当您刷新或在新选项卡中打开url http://a.com/b时,请求会转到您的nginx,其中不存在特定的路由,因此您会得到404.

为了避免这种情况,您需要为所有不匹配的路由加载根文件(通常为index.html),这样nginx就会发送该文件,然后路由就会由浏览器上的react应用程序处理.要做到这一点,你必须在nginx.confsites-enabled中适当地进行以下更改

location / {
 try_files $uri /index.html;
}

这告诉nginx查找指定的$uri,如果找不到,则将index.html发送回浏览器.(详见https://serverfault.com/questions/329592/how-does-try-files-work)

Reactjs相关问答推荐

CSS转换不适用于React MUI对象

将动态元素中的输入数据传输到Reaction

每次单击按钮时,Reaction组件都会重新生成

页面永远加载API/从数据库获取数据

在每页上应用字体-NextJS

为什么我的react 简单计时器项目不起作用?

如何清除过滤器搜索的状态

错误:无法获取 RSC 负载.返回浏览器导航

更新对象状态的父数组时记住子组件

react :输入失go 焦点,输入一个字符,

为什么在 React 的 useEffect 中使用 onAuthStateChanged ?

无法读取未定义的属性(阅读 'editQuoteModalShown')reactredux

React中useAuthenticator的authState在成功登录后仍保持未认证状态 - 需要强制刷新

Suspense/Await - 解析数据加载/保存到状态后无限循环

在 React JS 中编辑表格数据

如何禁用 redux-toolkit 的不可序列化值测试警告?

导入样式化组件时未导入组件内容

SonarCloud 代码覆盖率不适用于 Github Action

哪个是创建 React 应用程序的更好方法?

为什么 state redux-toolkit 是代理?