Bootstrap modals, Rails, & React.js/Flux
TLDR; Check out my Gist for code snippets to include a modal in React as a show page (no rerouting requried) for a clicked element.
------
While I was experimenting with Bootstrap modals in React, I found two different ways to use modals as show pages for elements instead of creating a separate show page for each element, resulting in route to a new page.
One was to use the ReactRouter History Mixin and reroute to an elements show route by using this.history.pushState(), grabbing the id from whatever was clicked on. However, this proved problematic because it involved creating a whole new route and including all the same components as the prior route plus the show modal component so that the UI looks the same. Then, on close of the modal, a reroute to the prior page would be required. WAY more complicated!
The other way is to have the click on the element trigger an action that dispatches data (including the element id) to a store, which changes some data stored in the store. A modal manager component can be listening to the store. When the store changes, the modal manager component rerenders to reflect the new changes. If the modal needs to be initiated, then a show modal component (which has the actual Bootstrap modal code) can be rendered. Otherwise, an empty string can be rendered. This way, no History Mixin is required and no rerouting is required! Check out my Gist for a better idea of what I’m talking about (it is a snippet from my code where the element is a post; I’ve included directory locations with a comment above each section).
Hope this helps someone and feel free to contact me if you have questions!