Question

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

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

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

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

我的BrowserRouter：

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

我的route.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设置为等于路由“ home”（'/')。

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

Answer 1

如果您的应用程序托管在静态文件服务器上，则需要使用Site is experiencing technical issues而不是if。

implementation

对于wp_enqueue_scripts之类的网站，您需要尝试<HashRouter>。对于<BrowserRouter>之类的网站，www.example.com/path/to/index.html可能有效。刷新非根页面后，像Nginx这样的服务器需要额外的配置才能正确渲染。

<HashRouter>

Answer 2

您不必使用 HashRouter。

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

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

2 个答案: