如何在不使用 Web 服务器的情况下加载 React/React Router 站点？

Question

我需要在不向网络服务器提供服务的情况下对运行的反应路由器网站做出反应，以便我的上级可以查找它。根据我老板的指示，我的任务是向他发送index.html包含所有已编译静态文件（js/css/img）的文件以加载该文件，以便他们可以查看我的工作。

我已经告诉我的老板，我可以向他发送带有package.jsonon 的站点，因此他所要做的就是运行npm install以获取依赖项并运行脚本来启动开发服务器，但是，他告诉我他必须提供它给那些不会node安装的人。我应该怎么办？

Answer 1

通过react-routerv4.xx，您可以使用<HashRouter />

import { HashRouter } from 'react-router-dom'

<HashRouter>
  <App/>
</HashRouter>

欲了解更多信息，请参阅以下链接

与react-routerv3.xx 使用hasHistory：

import React from 'react'
import { render } from 'react-dom'
import { hashHistory, Router, Route, IndexRoute } from 'react-router'

import App from '../components/App'
import Home from '../components/Home'

render(
  <Router history={hashHistory}>
    <Route path='/' component={App}>
      <IndexRoute component={Home} />
    </Route>
  </Router>,
  document.getElementById('app')
)

欲了解更多信息，请参阅以下链接

您可以使用react-router以下方式加载： reactunpkg

<script src="https://unpkg.com/react-router@4.2.0/umd/react-router.min.js"></script>

Answer 2

您可以尝试将"homepage": "."package.json 添加到您的项目中；这将指示反应脚本设置相对于index.html的所有路径。

当然，如果您的网站与服务器后端通信或具有客户端路由逻辑（看起来如此），则这将不起作用。create-react 文档提到了react-router basename prop来修复客户端路由问题......