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

Posted 2023-02-22

【中文标题】如何在静态 index.html 文件中使用 react-router BrowserRouter

【英文标题】：How to use react-router BrowserRouter in a static index.html file

【发布时间】：2019-09-04 08:28:37

【问题描述】：

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

我不想做的事情： - 提供构建文件夹。 - 配置 webpack - 可以从“http://localhost:XXXX”访问应用程序 - 改为使用HashRouter（我想访问props.history.push）

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

我已经将 package.json 配置为 "homepage": "."，并指定 BrowserRouter basename='/build'

我的浏览器路由器：

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

我的 routes.js 文件：

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

    </div>
  )

我的 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"
  

我希望最终结果将 c:/users/myself/project/app/build/index.html 设置为等于 route 'home' ('/')。

我愿意接受这是不可能的，但如上所述，能够从不精确的路径访问它让我相信我可以让它变得精确，只是弄乱了路由配置

【问题讨论】：

你在使用 create-react-app 吗？不知道你的意思是你希望它只是客户端，因为 react 是一个仅限客户端的库。如果您使用 create-react-app，那么当您运行 npm build 时，它将引导您的项目并默认使用 index.html。 React 是一个仅限客户端的库，因此除非您使用像 nextjs 这样的服务器端渲染库或其他东西，否则无论如何您的项目都将是一个仅限客户端的项目。如果您在 localhost 上查看它，它只是一个使用节点的开发服务器，但是一旦您构建了项目，它将只是客户端。

抱歉，具体来说：是的，我知道它完全是客户端。我要避免的只是必须在客户端上运行服务器来提供 index.html 文件

我想我只是不明白你在说什么。您不要在客户端运行服务器，因为不可能这样做，因此命名为客户端。当您构建应用程序时，它将您所做的一切捆绑到一个 javascript 文件中，因此不涉及服务器。您仅将节点用于开发目的。

问题是：npm run build 确实将所有内容打包到一个文件中，但这会导致 react-router 出现故障，无法将打开的文件识别为“索引”路径，因此不会加载除默认 404 组件之外的任何组件，并且我不想运行客户端服务器来提供文件，因为我不想从 localhost 访问应用程序

我真的很感兴趣，为什么你不想在使用 npm run build 生成它们之后运行 python -m http.server 来为你构建的应用程序提供服务？因为如果你想部署它，你无论如何都要把它部署在一个网络服务器上。

【参考方案1】：

如果您的应用程序托管在静态文件服务器上，您需要使用<HashRouter> 而不是<BrowserRouter>。

FAQ.md#why-doesnt-my-application-render-after-refreshing

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

对于像www.example.com 这样的网站，<BrowserRouter> 可能会起作用。像 nginx 这样的服务器在刷新非根页面后需要额外的配置才能正确呈现。

location / 
   try_files $uri /index.html;

【参考方案2】：

您不必使用HashRouter。

只需将您的静态 Web 服务器配置为为您定义的所有路由提供 index.html。例如，如果您使用 Nginx，请参阅this example config file。如果您使用的是 Apache 或 Express，请参阅 this。

【参考方案3】：

如果你在DigitalOcean上部署你的静态站点，你可以在Your App > Settings > App Spec下的App Spec中指定所有路由。

只需为static_sites > routes 下的文件的每个路由添加一个path。

然后每个路由将被转发到您的 / 路由，并由 react 路由器处理。

更多信息：https://docs.digitalocean.com/products/app-platform/concepts/http-route/