In react-static with react-router, how can I access props.location in the route template?

223 Views Asked by At

I am very new to react-static and am trying to adapt an existing react-router app to use it. I have my static.config.js setup as:

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'
  ]

}

And then index-react-static.js is identical to the boilerplate from 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)
    })
  }
}

And then AppReactStatic.js as:

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

But, the props that ObjectDetailPage receives do not include location (or history or match). What am I missing in my setup?

The stacktrace for my error does seem to indicate withRouter is wrapping my component:

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

There are 0 best solutions below