时间戳

首页 > 解决方案 > React Router 部署时无法直接访问子页面

reactjs - React Router 部署时无法直接访问子页面

问题描述

当我在 localhost 工作时，使用 create-react-app

我可以访问 localhost:3000/A 或 localhost:3000/B

但是当我将它部署到服务器时，npm build 运行并将构建的文件放到服务器文件夹中，例如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"
}

标签： reactjsroutesreact-routerweb-deploymentwebdeploy

解决方案

您是否尝试过使用字符串作为 basename 道具？

<BrowserRouter basename="project_name">
    <Route path='/A' component={A}/>
    <Route path='/B' component={B}/>
</BrowserRouter>

推荐阅读