Respond to routing between static and dynamic pages

Question

So, as a rule, our web application hosted in S3, index.html looks like this:

<div class=app></div> 

It also refers to the JS package and which React renders and that fine. But some elements of the site are statically generated for speed and SEO and look like this:

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

Ordinary wisdom can assume that there is static material in the ReactJS component and then reactDOM.renderToString() , but I do not want to do this, since it is rather difficult to do so, since the static component is pulled from many APIs.

So I'm struggling to find the documentation for what I want. I want to say that specific URLs require a full page load ( window.location ). Similarly, when navigating from a static content page, a full page load is required or the content should be replaced with <div class=app> .

How can I achieve this with a responsive router?

Answer 1

this is what I would let go of my head. We apologize if this does not meet your needs. I think I understand what you're going for. Maybe I'm wrong, but I think your static pages are not responding to them. Literal static pages, out of the reaction environment.

• I would create a whitelist for these static pages.

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

• then in my routes I will have fallthru, check the path.

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

or you can simply add static pages as follows:

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

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

When you return to the “respond to response” application, I would not think that you would need to do anything, as the return router will pick up the URL that you will return to.

4. You can also use the “Listener” in the location event.

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

I hope I'm not too far from my interpretation, if so. Let me know and I will delete the answer.