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)