Reactjs 如何在静态index.html文件中使用react router BrowserRouter

我正在尝试使用npm运行构建生成的static index.html文件以及react router。tl；博士是；我不想要客户端服务器，我希望通过打开位于build文件夹中的index.html文件来加载应用程序，并且BrowserRouter仍然能够在组件之间进行路由。目前，如果我排除路由路径中的“精确”道具，页面将加载“主页”组件，这意味着它知道它在某个地方，我只是不知道如何配置路由器以知道“C:/Users/imf/Project/app/build/index.html”等于“/”的路径，然后路由到每个组件。如果包含精确的道具，它只加载标准404组件。我应该如何配置BrouserRouter basename和/或package.json“homepage”，以便在页面最初打开时路由到index.html->load'home'组件

我不想做的事情： -为构建文件夹提供服务。 -配置网页包 -从“”访问应用程序 -更改为使用HashRouter（我想要访问props.history.push）

在我看来，如果应用程序可以显示“home”组件而不指定确切的位置，这意味着它在某些情况下可以到达它，而我只是没有正确指定索引路径，即它在某处，比如../project/build/index.html/某处

我已经将package.json配置为“homepage”：“.”，并指定了BrowserRouter basename={'/build'}

我的浏览器路由器：

<BrowserRouter basename={'/build'}>
   <Routes />
</BrowserRouter>

My routes.js文件：

const Routes = (props) => {
  return (
    <div>
      <Switch>
        <Route path={routes.HOME} component={Home} />
        <Route render={(props) => <div>404 - Not Found</div>} />
      </Switch>

    </div>
  )
}

const Routes=（道具）=>{
返回(
404-未找到}/>
)
}

my package.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"
  }
}

{
“名称”：“cra”，
“版本”：“0.1.0”，
“私人”：没错，
“主页”：“，
“依赖项”：{
“反应”：“^16.8.6”，
“react dom”：“^16.8.6”，
“react redux”：“^7.0.2”，
“反应路由器dom”：“^5.0.0”，
“反应脚本”：“2.1.8”，
“redux”：“^4.0.1”，
“redux记录器”：“^3.0.6”，
“redux thunk”：“^2.3.0”
},
“脚本”：{
“开始”：“反应脚本开始”，
“构建”：“反应脚本构建”，
“测试”：“反应脚本测试”，
“弹出”：“反应脚本弹出”
},
“eslintConfig”：{
“扩展”：“反应应用程序”
},
“浏览者”：[
">0.2%",
“没有死”，
“不是我
如果应用程序托管在静态文件服务器上，则需要使用
而不是


对于
www.example.com/path/to/index.html这样的网站，您需要尝试

对于
www.example.com
这样的网站，
可能可以工作。像Nginx这样的服务器需要额外的配置，以便在刷新非根页面后正确呈现

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

您正在使用create react应用程序吗？不确定您希望它只是客户端的意思，因为react是一个仅客户端的库。如果您使用create react应用程序，则当您运行npm build时，它将引导您的项目并默认使用index.html。react是一个仅客户端的库，因此除非您使用服务器端呈现库，如nextjs或其他东西不管怎样，您的项目都将是一个仅客户端的项目。如果您在localhost上查看它，它只是一个使用节点的开发服务器，但一旦您构建了项目，它将仅限于客户端。对不起，我明白它完全是客户端的。我试图避免的是必须在客户端上运行服务器为了提供index.html文件，我想我不明白你在说什么。你不在客户端运行服务器，因为这是不可能的，因此命名为客户端。当你构建应用程序时，它会将你所做的一切捆绑到一个javascript文件中，因此不涉及服务器。你只使用node进行开发e是：npm运行构建确实会将所有内容打包到一个文件中，但这会导致react路由器出现故障，无法将打开的文件识别为“索引”"路径，因此除了默认的404组件外，不加载任何组件，我不想运行客户端服务器来提供文件，因为我不想从访问应用程序，我实际上很感兴趣的是，为什么您不想在使用npm run build生成应用程序后运行python-m http.server来为构建的应用程序提供服务？因为如果您想部署它，您无论如何都应该在web服务器中部署它。