如何在静态index.html文件中使用react-router BrowserRouter [英] How to use react-router BrowserRouter in a static index.html file

问题描述

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

I'm attempting to use the static index.html file generated by npm run build, along with react-router. the tl;dr is; i do not want a client server, I want the app to be loaded by opening the index.html file located in the build folder and still have BrowserRouter be able to route between components. At the moment, the page will load the 'home' component if I exclude the 'exact' prop in the route path, meaning it knows that it's out there somewhere, I just don't know how to configure the router to know that 'C:/Users/Myself/Project/app/build/index.html' is equal to the path of '/' and route to each component thereafter. if the exact prop is included, it just loads the standard 404 component. How should i configure the BrouserRouter basename, and/or the package.json "homepage" in order to route to the index.html-> load 'home' component when the page is initially opened?

我不想做的事情: -提供构建文件夹. -配置Webpack -通过" http://localhost:XXXX "访问该应用 -更改为使用HashRouter(我想访问props.history.push)

things I do not want to do: - serve the build folder. - configure webpack - have the app accessible from 'http://localhost:XXXX' - change to use HashRouter (I want access to props.history.push)

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

In my mind, if the app can show the 'home'component without specifying exact, it means that it can reach it under certain circumstances, and i'm just not specifying what the index path is properly, i.e it is somewhere out there at like ../project/build/index.html/somewhere

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

I have already configured the package.json to have "homepage": ".", and have specified the BrowserRouter basename={'/build'}

我的BrowserRouter:

My BrowserRouter:

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

我的route.js文件:

My routes.js file:

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

    </div>
  )
}

我的package.json:

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"
  }
}

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

I want the end result to set c:/users/myself/project/app/build/index.html to equal route 'home' ('/').

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

I'm willing to accept that this is not possible, but as stated above, being able to access it from an inexact path leads me to believe i can make it exact and am just messing up the route config

推荐答案

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

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

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

For a website like www.example.com/path/to/index.html, you need to try a <HashRouter>. For a website like www.example.com, <BrowserRouter> might work. The server like Nginx needs an extra config for proper renders after refreshing non-root pages.

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

这篇关于如何在静态index.html文件中使用react-router BrowserRouter的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！