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 /> тоже не то место.

rout.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, и это всегда API истории HTML5 , который не будет работать в среде без DOM, например на сервере.

Вы можете структурировать свое приложение так, чтобы оно не включало BrowserRouter на сервере, или вы могли бы заменить его компонентом Router и передать ему свой собственный объект history, который будет использовать историю памяти всреды без DOM.

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