【问题标题】：createMemoryHistory still reports `Browser history needs a DOM`createMemoryHistory 仍然报告“浏览器历史需要一个 DOM”
【发布时间】：2019-04-28 15:54:41
【问题描述】：

我收到了错误，出于所有目的，我认为我不应该这样:)

流量是

客户 history.js > client/index.js > history = createBrowserHistory > <App history={history} />

服务器 history.js > server/index.js > history = createMemoryHistory > <App history={history} />

我可以确认服务器上正在使用内存，然后它会掉下来，所以我们永远无法到达BroswerHistory

server.js 中的错误

Invariant Violation: Browser history needs a DOM

  30 | 
  31 |          // Render the component to a string
> 32 |          const markup = renderToString(
  33 |              <Provider store={store}>
  34 |                  <App history={history} />
  35 |              </Provider>

history.js

import createBrowserHistory from 'history/createBrowserHistory'
import createMemoryHistory from 'history/createMemoryHistory'

let history
let createHistory

if (typeof document !== 'undefined') {
    createHistory = createBrowserHistory
} else {
    createHistory = createMemoryHistory
}
history = createHistory()

export default history

我已经检查并确保<BrowserRouter /> 也不是错误的地方。

routes.js

const routes = (
    <Fragment>
        <BrowserRouter>
            <Switch>
                <Route component={NoMatch} />
            </Switch>
        </BrowserRouter>
    </Fragment>
)

export default routes

server.js

 import history from '../common/history'

 const store = configureStore(preloadedState, history)

// Render the component to a string
const markup = renderToString(
    <Provider store={store}>
        <App history={history} />
    </Provider>
)

App.js

import React from 'react'
import PropTypes from 'prop-types'
import { ConnectedRouter } from 'connected-react-router'
import routes from '../routes'

const App = ({ history }) => {
    return <ConnectedRouter history={history}>{routes}</ConnectedRouter>
}

App.propTypes = {
    history: PropTypes.object
}

export default App

【问题讨论】：

您在哪里使用导出的history 对象？您不应该将它与Router 一起使用而不是使用BrowserRouter 吗？ <Router history={history}> ... </Router>
导出的history在多个地方使用，server/index.js，client/index.js，然后通过这两个server/client文件作为道具传递给App.js
好的。考虑将<BrowserRouter> 改为<Router history={history} />，看看是否可行。
你看到这个问题了吗？也许根本原因是相似的。 stackoverflow.com/questions/48649569/…
@Tholle 我正在使用connected-react-router v5，只是作为注释。确实这有效：D请添加答案并简要说明原因（如果可能）：D

标签： javascript reactjs redux react-router react-router-v4

【解决方案1】：

BrowserRouter 组件会创建一个自己的 history 对象，并且它始终是 HTML5 history API 在非 DOM 环境中不起作用，例如服务器。

您可以构建您的应用程序以在服务器上不包含 BrowserRouter，或者您可以将其替换为 Router 组件并将您自己的 history 对象传递给它，该对象将在非 DOM 环境中使用内存历史记录.

const routes = (
    <Fragment>
        <Router history={history}>
            <Switch>
                <Route component={NoMatch} />
            </Switch>
        </Router>
    </Fragment>
)

【讨论】：

谢谢朋友，我没有意识到它是自己的history，很高兴知道。