React_on_rails: Need to update docs on react-router and server rendering.

[justin808]

Code for server rendering a react component does nothing with the redirectLocation. The problem is that the redirect location cannot be used once we're in the rendering from the controller.

Doc problems to fix

1. This page needs updating: react-router.md. This code example does not reflect the v4.x react-router docs.
2. The only purpose of setting the redirectLocation is that it prints an informational message on the server. The client HTML still renders.
3. The code from react-router will do the redirect.

Questions:

1. Should we remove the redirectLocation option since it doesn't do anything? Or should we have it render a script tag with window.location = redirectLocation?

https://github.com/shakacode/react_on_rails/blob/c5e968da8215865368dfc89cc8673b4b827a57c2/node_package/src/serverRenderReactComponent.js#L10

export default function serverRenderReactComponent(options) {
  const { name, domNodeId, trace, props, railsContext } = options;

  let htmlResult = '';
  let hasErrors = false;

  try {
    const componentObj = ComponentRegistry.get(name);
    if (componentObj.isRenderer) {
      throw new Error(`\
Detected a renderer while server rendering component '${name}'. \
See https://github.com/shakacode/react_on_rails#renderer-functions`);
    }

    const reactElementOrRouterResult = createReactElement({
      componentObj,
      domNodeId,
      trace,
      props,
      railsContext,
    });

    if (isCreateReactElementResultNonReactComponent(reactElementOrRouterResult)) {
      // We let the client side handle any redirect
      // Set hasErrors in case we want to throw a Rails exception
      hasErrors = !!reactElementOrRouterResult.routeError;

      if (hasErrors) {
        console.error(
          `React Router ERROR: ${JSON.stringify(reactElementOrRouterResult.routeError)}`,
        );
      }

      if (reactElementOrRouterResult.redirectLocation) {
        if (trace) {
          const redirectLocation = reactElementOrRouterResult.redirectLocation;
          const redirectPath = redirectLocation.pathname + redirectLocation.search;
          console.log(`\
ROUTER REDIRECT: ${name} to dom node with id: ${domNodeId}, redirect to ${redirectPath}`,
          );
        }
        // For redirects on server rendering, we can't stop Rails from returning the same result.
        // Possibly, someday, we could have the rails server redirect.
      } else {
        htmlResult = reactElementOrRouterResult.renderedHtml;
      }
    } else {
      htmlResult = ReactDOMServer.renderToString(reactElementOrRouterResult);
    }
  } catch (e) {
    hasErrors = true;
    htmlResult = handleError({
      e,
      name,
      serverSide: true,
    });
  }

CC: @robwise @alexfedoseev

[justin808]

https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/package.json#L88 uses Router v4 with React on Rails v9.

Does anybody want to take a crack at a PR to update the docs on this?

[NinjaAwesome]

@justin808 I am Gezane Vega from Upwork.
In my opinion, it is necessary versioning up.
In Package.json file, it shold edit react version and add react-router.

[Handy117]

@justin808
Server-side rendering, namely, renders the React components on the server. The output is HTML content.
window.location is client-side rendering.
Perhaps, window.location is not fine.
In my opinion;
there is some ways, one of all is by create a fresh Redux Store on every request.

How about my opinion?
Thanks.

[shahidjutt72]

@justin808 i am shahid nawaz from upwork.

From opinion we should not use 'window.location' as this is not a good approach to use window, document or some JQuery code. By doing some R&D i suggest to follow this.

http://redux.js.org/docs/recipes/ServerRendering.html

Thanks