Best practice for having multiple routes point to the same page?

[raffishquartan]

What is best practice for having multiple routes point to the same canonical page? E.g.:

• /autos/automatic/diesel (this is also the canonical URL)
• /autos/diesel/automatic

Having both routes work is better UX for the user, and both pages will always display exactly the same information.

One option is something like the following, although it risks typos and missed updates if the page component props change. Even better would be specifying multiple paths in a single route object. Is there any way of doing this or another way of generating multiple routes that point to a single canonical URL?

const canonicalRelPath = '/autos/automatic/diesel';
const alternateRelPath = '/autos/diesel/automatic';

export default {
  path: canonicalRelPath,
  action() {
    return <AutomaticDieselLandingPage canonicalPath={url.resolve(base_url, canonicalRelPath)}/>;
  },
};

export const alternatePath = {
  path: alternateRelPath,
  action() {
    return <AutomaticDieselLandingPage canonicalPath={url.resolve(base_url, canonicalRelPath)}/>;
  },
};

[frenzzy]

What about this?

const action = () => <CanonicalPage />;
const routes = [
  { path: '/canonical/path', action },
  { path: '/alternative/path', action },
];

[koistya]

There are multiple ways to achieve the same result, not sure if there is a best practice, here is another example:

import React from 'react';
import Page from './Page';

export default {
  path: [
    '/autos/automatic/diesel', /* canonical URL path */
    '/autos/diesel/automatic',
  ],
  action({ route }) {
    return { component: <Page canonicalUrl={route.path[0]} /> };
  }
}

[raffishquartan]

Thanks, issue resolved