![](/img/trans.png)
[英]React Router v6 - Direct links to a subpage return a 404 error
[英]React Router fail to direct access subpage when deployed
当我在本地主机上工作时,使用 create-react-app
我可以访问 localhost:3000/A 或 localhost:3000/B
但是当我将它部署到服务器时, npm build run 并将构建的文件放到服务器文件夹中,就像https://ip/project_name
我可以单击<Link/>
转到https://ip/project_name/A或https://ip/project_name/B但我无法直接访问https://ip/project_name/A 。
应用程序.js
<BrowserRouter basename={'project_name'}>
<Route path='/A' component={A}/>
<Route path='/B' component={B}/>
</BrowserRouter>
关联
<Link to="/A">A</Link>
<Link to="/B">B</Link>
包.json
"homepage": ".",
...
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.2.0"
}
您是否尝试过使用字符串作为 basename 道具?
<BrowserRouter basename="project_name">
<Route path='/A' component={A}/>
<Route path='/B' component={B}/>
</BrowserRouter>
为后人:
您必须在 Web 服务器中添加重写规则:例如,将 /* 重写为 /index.html
它应该可以解决您的问题。
为什么:对于具有动态(反应)页面的静态站点,Web 服务器仅提供主文件 index.html 和一些静态文件,如 css、图像等。
加载 index.html 后,将使用 react-router 选择正确的页面,具体取决于 url 路径上的资源路径。
如果没有重写规则,像 https://ip/project_name/A 这样的路径会在服务器上请求一个资源“A”。 所以 index.html 永远不会被检索,你会得到一个 404 状态代码。
只需使用没有 basename 的 HashRouter 而不是 BrowserRouter:
import { HashRouter, Route } from 'react-router-dom';
// Then in render
<HashRouter>
<Route path='/' component={ Home } exact />
<Route path='/contact' component={ Contact} exact />
</HashRouter>
请注意,您将 /#/ 包含在 URL 中:
问题出在服务器文件夹中,反应路由器设置正确。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.