createMemoryHistory 仍然报告“浏览器历史记录需要 DOM”

Question

我收到错误消息，我认为我不应该这样:)

流量为

客户端 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

Answer 1

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

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

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

createMemoryHistory 仍然报告“浏览器历史记录需要 DOM”

createMemoryHistory still reports `Browser history needs a DOM`

javascript

reactjs

react-router

redux

react-router-v4

history.js

routes.js

server.js

App.js