Optimizing ReactJS Route Redirection and Page Display for External Links

Question

For a ReactJS application, I aim to establish a specific route (e.g. "/myroute") to redirect users to an external link. Prior to redirection, I execute certain logic to construct this external URL. To facilitate this, I've created a dedicated component in which I've implemented both the logic and the redirection.

This setup functions adequately, but I've observed that when I request my designated route (e.g. "/myroute"), for a brief moment, I see the basic React page template structure before being redirected to the external page. I'd like to eliminate this interim display.

Upon reviewing the code, I've noticed the following organization pertaining to the router:

ReactDOM.render(
  <Provider store={configureStore()}>
    <I18nextProvider i18n={i18n}>
      <Router>
        <Common>
          <Switch>
            <Route
              exact
              path="/"
              render={props => (
                <HomeModule
                  {...props}
                  ...
                />
              )}
            />
            <Route
              exact
              path="/myRoute"
              render={props => (
                <MyModule
                  {...props}
                  ...
                />
              )}
            />
            <Route
              exact
              path="/login"
              render={props => (
                <LoginModule
                  {...props}
                  ...
                />
              )}
            />          
            <Route
              render={props => (
                <HomeModule
                  {...props}
                  ...
                />
              )}
            />
          </Switch>
        </Common>
      </Router>
    </I18nextProvider>
  </Provider>,
  document.getElementById('root')
);

It appears that the page template is dictated by the Common component, where within the render method, the complete page structure is defined.

Given that I'd prefer not to reveal the entire page structure for this particular route, I've contemplated implementing an alternative router.

As a result, I've made adjustments to the arrangement, aiming to establish a streamlined route devoid of the Common component. However, I'm puzzled by the fact that despite my efforts, the outcome remains unaltered—I consistently encounter the same page template.

Do you have any insights or suggestions regarding this matter?

Answer 1

I suggest moving the "/myRoute" route out of the Common component container. You'll need another Switch component to render exclusively between "/myRoute" and a "/" route that renders the Common component and nested Switch and routes.

Example:

ReactDOM.render(
  <Provider store={configureStore()}>
    <I18nextProvider i18n={i18n}>
      <Router>
        <Switch>
          <Route
            path="/myRoute"
            render={props => <MyModule {...props} ... />}
          />
          <Route path="/">
            <Common>
              <Switch>
                <Route
                  path="/login"
                  render={props => <LoginModule {...props} ... />}
                />          
                <Route
                  exact
                  path="/"
                  render={props => <HomeModule {...props} ... />}
                />
                <Route
                  render={props =>  <HomeModule {...props} ... />}
                />
              </Switch>
            </Common>
          </Route>
        </Switch>
      </Router>
    </I18nextProvider>
  </Provider>,
  document.getElementById('root')
);