Skip to content

Instantly share code, notes, and snippets.

@mbrochh
Last active July 4, 2018 09:15
Show Gist options
  • Save mbrochh/5dc50977b6e425ebf8b144395c632037 to your computer and use it in GitHub Desktop.
Save mbrochh/5dc50977b6e425ebf8b144395c632037 to your computer and use it in GitHub Desktop.
Issue with react-loadable, react-router and react-apollo when loading the same component twice.
// Kudos to @kronosfere for discovering this!!
// App.js:
const SomeView = Loadable({
loader: () => import('./SomeView.js'),
loading: Loading,
})
const SomeWrapperView = Loadable({
loader: () => import('./SomeWrapperView.js'),
loading: Loading,
})
const App = () => (
<Provider store={store}>
<Switch>
<Route exact path="/someview/" component={SomeView} />
<Route exact path="/somewrapper/" component={SomeWrapperView} />
</Switch>
</Provider>
)
// SomeWrapperView.js
const SomeView = Loadable({
loader: () => import('./SomeView.js'),
loading: Loading,
})
const SomeWrapperView = () => (
<Switch>
<Route exact path="/somewrapper/someview/" component={SomeWrapperView} />
</Switch>
)
// App.js:
const SomeView = Loadable({
loader: () => import('./SomeView.js'),
loading: Loading,
})
const SomeWrapperView = Loadable({
loader: () => import('./SomeWrapperView.js'),
loading: Loading,
})
const App = () => (
<Provider store={store}>
<Switch>
<Route exact path="/someview/" component={SomeView} />
<Route
exact
path="/somewrapper/"
render={props => (
<SomeWrapperView LoaderSomeView={SomeView} {...props} />
)}
/>
</Switch>
</Provider>
)
// SomeWrapperView.js
const SomeWrapperView = props => (
<Switch>
<Route
exact
path="/somewrapper/someview/"
render={props => (
<this.props.LoaderSomeView {...props} />
)}
/>
</Switch>
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment