1

我对 react-static 非常陌生，并且正在尝试调整现有的 react-router 应用程序以使用它。我的static.config.js设置为：

export default {

  getRoutes: async ({ dev }) => {
    return [
      {
        path: '/details/someobject',
        template: 'src/containers/ObjectDetailPage',
      },
      {
        path: '/',
        template: 'src/containers/HomePage',
      }
    ];
  },

  entry: 'index-react-static.js',

  plugins: [
    'react-static-plugin-react-router'
  ]

}

然后index-react-static.js与来自的样板相同react-static create：

import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'

// Your top level component
import AppReactStatic from './AppReactStatic'

// Export your top level component as JSX (for static rendering)
export default AppReactStatic

// Render your app
if (typeof document !== 'undefined') {
  const target = document.getElementById('root')

  const renderMethod = target.hasChildNodes()
    ? ReactDOM.hydrate
    : ReactDOM.render

  const render = Comp => {
    renderMethod(
      <AppContainer>
        <Comp />
      </AppContainer>,
      target
    )
  }

  // Render!
  render(AppReactStatic)

  // Hot Module Replacement
  if (module && module.hot) {
    module.hot.accept('./AppReactStatic', () => {
      render(App)
    })
  }
}

然后AppReactStatic.js作为：

import React from 'react'
import { Root, Routes } from 'react-static'
import { Provider } from 'react-redux';

import store from './store/store'

function AppReactStatic() {
  return (
    <Root>
      <Provider store={ store }>
          <React.Suspense fallback={<span>Loading...</span>}>
            <Routes />
          </React.Suspense>
      </Provider>
    </Root>
  )
}

export default AppReactStatic

但是，ObjectDetailPage接收的道具不包括location（或history或match）。我的设置中缺少什么？

我的错误的堆栈跟踪似乎确实表明withRouter正在包装我的组件：

    in Route (created by withRouter())
    in withRouter()
    in Unknown (created by Routes)
    in Routes (created by AppReactStatic)
4

0 回答 0