CODEWITHSUNDEEP
reactjsreact-router
hendry
hendry

Reputation: 10823

React routing between static and dynamic pages

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?

Upvotes: 9

Views: 2372

Answers (1)

james emanon
james emanon

Reputation: 11807

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:

  1. 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.

  1. 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.

Upvotes: 6

Related Questions