createMemoryHistory는 여전히 브라우저 역사에는 DOM이 필요하다고 보고한다.

createMemoryHistory는 여전히 브라우저 역사에는 DOM이 필요하다고 보고한다.

나는 모든 목적을 위해 내가 되어서는 안 된다고 믿는 오류를 받고 있다 :)

흐름은.

고객 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>
)

앱.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

그BrowserRouter구성 요소: 생성history자체 객체, 그리고 그것은 항상 HTML5 history API이며, 비 DOM 환경(예: 서버)에서는 작동하지 않을 것이다.

응용프로그램을 구성하여 다음 항목을 포함하지 않음BrowserRouter서버에, 또는 구성요소로 교체하고 자신의 구성요소를 전달할 수 있다.historyDOM이 아닌 환경에서 메모리 기록을 사용할 개체.

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

참조URL: https://stackoverflow.com/questions/53490681/creatememoryhistory-still-reports-browser-history-needs-a-dom