Where to place client script

[ComputerCarl]

When I navigate my pages, the page is not loading to the top of the new page.

1. Is there some reason the new page wouldn't navigate to the top as default?
2. Where would I send JavaScript to the client? I tried putting a window.scrollTo(0, 50); in the Article's componentDidMount, but that doesn't work for obvious reasons.
   Must I use the Document setting of static.config.js, or is there a faster, cleaner way?

[mjsisley]

1. This has to do with react-router and client-side routing in general ( https://reacttraining.com/react-router/web/guides/scroll-restoration).
2. One of the solutions listed in those docs should work. I'm using ScrollToTopOnMount within a react-static context and don't have an issue.

[ComputerCarl]

Is it my mistake or is react-static not "client-side routing" and there also is no window object to use the ScrollToTopOnMount method in the article you referenced? Still confused.

2. Also.. If I want to include client-side JS for whatever other purpose, where would I do so?

[mjsisley]

componentDidMount doesn't get called by React server side (no mounting), so you are safe using JS that is only safe in the browser (like window) there.

react-static wraps react-router. The routes are pre-rendered to HTML (and there is an html file for each route specified), so there isn't client side routing on initial load (like you may see in a normal SPA like from create-react-app), but client-side routing is going on after the initial page load.

@tannerlinsley please correct me if I'm wrong.

[tannerlinsley]

Spot on. Initial page loads are handled by your server and should resolve to the statically generated HTML pages. React then mounts and react router takes over from there. You must be aware as has been mentioned that your app will run in the node context during export, so your app must be node safe and only execute browser dependent code (any thing relying on window or document) inside componentDidMount or (typeof document !== "undefined") conditions.

…

On Sun, Jan 14, 2018 at 12:44 PM Matthew Sisley ***@***.***> wrote: componentDidMount doesn't get called by React server side (no mounting), so you are safe using JS that is only safe in the browser (like window) there. react-static wraps react-router. The routes are pre-rendered to HTML (and there is an html file for each route specified), so there isn't client side routing on initial load (like you may see in a normal SPA like from create-react-app), but client-side routing is going on after the initial page load. @tannerlinsley <https://github.com/tannerlinsley> please correct me if I'm wrong. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#296 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFUmCaT0DhUEd7R2-WUr2Zw60I9E1uEdks5tKlkpgaJpZM4RdQok> .

[tannerlinsley]

To wrap this up for posterity, client scripts (like google analytics, fonts, or any other assets that are site wide or external) can be placed in your Document component in your static.config.js file. For inline scripts, you will need to dangerouslySetInnerHtml.

[ComputerCarl]

Being able to have window work in componentDidMount made me smile. :-)

    componentDidMount () {
        window.scrollTo(0,0);
    }