![404]( "404")
本文介绍了React 应用程序将在 prod 中刷新页面上给出 404，但在 dev 中不会的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个 React 应用程序，我的导航中有 404 的问题，如果我尝试刷新一个不是根页面的页面，它会给我一个 404.
事情是它只发生在我的生产中，而不是在开发中.
在开发环境中，我使用npm start，在生产环境中，我使用serve build.
这使调试变得更加复杂，因为我失去了用于调试的热重载选项.每次进行更改时，我都必须编译我的 docker 映像.
这是我的一些代码:
<div><开关><路由精确路径="/premiere-connexion" component={FirstLoginLayout}/>{(user.state === "1" && window.location.pathname === "/premiere-connexion") &&<重定向到="/premiere-connexion"/>}<PrivateRoute path="/bo" component={BackOfficeLayout} profiles={["ADMIN"]}/><路由精确路径="/" component={Customer}/><重定向到="/"/></开关>}
</BrowserRouter>
知道我应该如何在本地复制它吗?
解决方案
根据@hbentlov 的建议，我解决了这个问题，在 public/ 中创建了一个文件 serve.json文件夹，内容如下:
{重写":[{来源": "**"，目的地":/index.html"}]}I have a React app, and I have an issue with 404 in my navigation, if I try to refresh a page that is not the root page, it will give me a 404.
Thing is it only happens to me on production and not on dev.
In dev environment, I use npm start, on prod environment, I use serve build.
This make debug more complicated, as I lose the hot-reload option for debugging. I must compile my docker image each time I make a change.
Here is a bit of my code:
<BrowserRouter>
<div>
<Switch>
<Route exact path="/premiere-connexion" component={FirstLoginLayout}/>
{(user.state === "1" && window.location.pathname === "/premiere-connexion") &&
<Redirect to="/premiere-connexion"/>}
<PrivateRoute path="/bo" component={BackOfficeLayout} profiles={["ADMIN"]}/>
<Route exact path="/" component={Customer}/>
<Redirect to="/"/>
</Switch>
}
</div>
</BrowserRouter>
Any Idea how should I reproduce it in local ?
解决方案
With @hbentlov recommendations, I solved this issue creating a file serve.json in the public/ folder, with this content:
{
"rewrites": [{
"source": "**",
"destination": "/index.html"
}]
}
这篇关于React 应用程序将在 prod 中刷新页面上给出 404，但在 dev 中不会的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！