React routing between static and dynamic pages

Question

So normally our S3 hosted Web app index.html looks like:

 <div class=app></div>

That also references the JS bundle & which React renders to and that's fine. But some elements of the site are statically generated for speed & SEO and look like:

 <!-- dynamically generated content -->
 <div class=app></div>
 <!-- statically generated content -->
 <h1>Title</h1>
 <p>Information, blah blah blah</p>
 <p>Lots of content</p>

Conventional wisdom might suggest having the static stuff in a ReactJS component and then reactDOM.renderToString(), but I don't want to do it that way since it's rather complex to do it that way since the static component pulls from many several APIs.

So I am struggling to find documentation for what I want. I want to be able to say for certain URLs, that a full page load is necessary (window.location). Similarly, when navigating away from a static page with content, a full page load is needed or the content need to zapped back to <div class=app>.

How do I achieve this with a react router?

Answer 1

this is something I would go with off the top of my head. I apologize if doesn't suit your needs/purpose. I think I understand what you are going for. I might have this wrong, but I am thinking that your static pages do not have react-route on them. Literal static pages, outside the react environment.

1. I'd create a whitelist for these static pages.

   const whitelist = ['aboutus', 'help']

2. then in my routes, I'd have the fallthru, check for the path.

   //psuedo code
   {
       path: '*',
       onEnter: () => {
         if(whitelist.includes(path)) {
             window.location = /path
         }
       },
       component: Four0Four,
   },
   

or you could just prepend the static pages like so:

3. perhaps a url like "/static?aboutus.html"

   //psuedo code
   {
       path: 'static',
       onEnter: () => {
         if(whitelist.includes(path)) {
             window.location = `/static/${param}`
         }
       },
       component: Four0Four,
   },
   

When you come back to the "react-route react" app, I wouldn't think you'd have to do anything as the react-router will pick up from the url you move back to.

4. You could also use the "Listener" on the location event.

   browserHistory.listen(location => {
       // do your checking for the static pages here
   });
   

I hope I am not too far off base on my interpretation, if I am. Let me know and I'll delete my response.