在带有 react-router 的 react-static 中,如何访问路由模板中的 props.location?

问题描述

我对 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 收到的 props 不包括 location(或 historymatch)。我的设置中缺少什么?

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

    in Route (created by withRouter())
    in withRouter()
    in UnkNown (created by Routes)
    in Routes (created by AppReactStatic)

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)