我正在尝试使用npm run build生成的静态索引.html文件以及react-router。博士是;我不想要客户端服务器，我希望通过打开位于构建文件夹中的 index.html 文件来加载应用程序，并且仍然让 BrowserRouter 能够在组件之间路由。目前，如果我在路由路径中排除"确切"属性，页面将加载"home"组件，这意味着它知道它在某个地方，我只是不知道如何配置路由器知道"C:/Users/Myself/Project/app/build/index.html"等于"/"的路径，然后路由到每个组件。如果包含确切的道具，它只会加载标准的 404 组件。我应该如何配置BrouserRouter basename和/或package.json"主页"，以便在最初打开页面时路由到index.html>加载"home"组件？
我不想做的事情： - 提供构建文件夹。 - 配置网络包 - 从"http：//localhost：XXXX"访问应用程序 - 更改为使用哈希路由器(我想访问props.history.push)
在我看来，如果应用程序可以在不指定确切的情况下显示"home"组件，这意味着它在某些情况下可以访问它，而我只是没有正确指定索引路径是什么，即它在某个地方，就像../project/build/index.html/某处
我已经将package.json配置为具有"主页"："."，并指定了BrowserRouter basename={'/build'}
我的浏览器路由器：
<BrowserRouter basename={'/build'}>
<Routes />
</BrowserRouter>
我的路线.js文件：
const Routes = (props) => {
return (
<div>
<Switch>
<Route path={routes.HOME} component={Home} />
<Route render={(props) => <div>404 - Not Found</div>} />
</Switch>
</div>
)
}
我的包.json：
{
"name": "cra",
"version": "0.1.0",
"private": true,
"homepage": ".",
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^7.0.2",
"react-router-dom": "^5.0.0",
"react-scripts": "2.1.8",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"node-sass": "^4.11.0"
}
}
我希望最终结果将 c:/users/myself/project/app/build/index.html 设置为等于路线"家"("/")。
我愿意接受这是不可能的，但如上所述，能够从不精确的路径访问它让我相信我可以让它变得精确，只是弄乱了路由配置
如果您的应用程序托管在静态文件服务器上，则需要使用
<HashRouter>而不是<BrowserRouter>。
FAQ.md#why-don't-my-application-render-after-refresh
对于像www.example.com/path/to/index.html这样的网站，您需要尝试<HashRouter>。
对于像www.example.com这样的网站，<BrowserRouter>可能有效。像Nginx这样的服务器需要一个额外的配置，以便在刷新非根页面后正确呈现。
location / {
try_files $uri /index.html;
}
您不必使用HashRouter。
只需将静态 Web 服务器配置为为您定义的所有路由提供index.html。例如，如果您使用的是 Nginx，请参阅此示例配置文件。如果您使用的是 Apache 或 Express，请参阅此处。
如果您在 DigitalOcean 上部署静态站点，则可以在 App Spec 的Your App > Settings > App Spec下指定所有路由。
只需将每个路由的path添加到static_sites > routes下的文件中即可。
然后，每个路由将被转发到您的/路由，在那里它将由反应路由器处理。
更多信息： https://docs.digitalocean.com/products/app-platform/concepts/http-route/
我遇到了同样的问题，我在步骤 5 https://hostrain.in/help/deploy-host-react-app-in-cpanel/或在您的public_html文件夹中使用此链接解决了它，添加一个.htaccess文件并添加以下代码并保存
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>请注意，.htaccess文件是隐藏的，您应该在文件管理器的设置中启用显示隐藏文件。 祝您编码愉快！