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

问题描述

我正在尝试使用由 npm run build 生成的静态 index.html 文件以及 react-router.tl;博士是;我不想要客户端服务器，我希望通过打开位于构建文件夹中的 index.html 文件来加载应用程序，并且仍然让 BrowserRouter 能够在组件之间进行路由.目前，如果我在路由路径中排除了 'exact' prop，页面将加载 '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>

我的 routes.js 文件:

const Routes = (props) =>{返回 (<div><开关><Route path={routes.HOME} component={Home}/><路由渲染={(道具)=><div>404 - 未找到</div>}/></开关>

)}

我的 package.json:

<代码>{"name": "cra",版本":0.1.0"，私人":真的，主页": "."，依赖关系":{反应":^ 16.8.6"，"react-dom": "^16.8.6","react-redux": "^7.0.2","react-router-dom": "^5.0.0",反应脚本":2.1.8"，"redux": "^4.0.1","redux-logger": "^3.0.6","redux-thunk": "^2.3.0"},脚本":{开始":反应脚本开始"，"build": "react-scripts build","test": "反应脚本测试",弹出":反应脚本弹出"},eslintConfig":{扩展":反应应用程序"},浏览器列表":[">0.2%",没死"，不是即 <= 11"，不是 op_mini 全部"],开发依赖":{节点-sass":^4.11.0"}}

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

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

解决方案

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

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

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

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

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

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?

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)

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

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

My BrowserRouter:

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

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

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

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

解决方案

If your application is hosted on a static file server, you need to use a <HashRouter> instead of a <BrowserRouter>.

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

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屋！