13

我正在尝试使用由 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 “主页”

我不想做的事情： - 提供构建文件夹。- 配置 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' ('/')。

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

4

3 回答 3

11

如果您的应用程序托管在静态文件服务器上，则需要使用 a<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;
}
于 2019-11-07T02:08:27.777 回答
0

您不必使用HashRouter.

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

于 2021-08-10T17:35:02.173 回答
0

如果您在 DigitalOcean 上部署静态站点，则可以在App Spec中的Your App > Settings > App Spec.

只需path为每个路由添加一个到static_sites > routes.

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

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

于 2021-08-21T10:56:44.777 回答