📦 plugin-client-redirects

Docusaurus Plugin to generate client-side redirects.

This plugin will write additional HTML pages to your static site that redirect the user to your existing Docusaurus pages with JavaScript.

Installation

npm2yarn

npm install --save @docusaurus/plugin-client-redirects

Configuration

Accepted fields:

mdx-code-block

<APITable>

Option	Type	Default	Description
`fromExtensions`	`string[]`	`[]`	The extensions to be removed from the route after redirecting.
`toExtensions`	`string[]`	`[]`	The extensions to be appended to the route after redirecting.
`redirects`	`[RedirectRule](#RedirectRule)[]`	`[]`	The list of redirect rules.
`createRedirects`	`[CreateRedirectsFn](#CreateRedirectsFn)`	`undefined`	A callback to create a redirect rule. Docusaurus query this callback against every path it has created, and use its return value to output more paths.

mdx-code-block

</APITable>

Types

`RedirectRule`

TypeScript

type RedirectRule = {
  to: string;
  from: string | string[];
};

`CreateRedirectsFn`

TypeScript

// The parameter `path` is a route that Docusaurus has already created. It can
// be seen as the "to", and your return value is the "from". Returning a falsy
// value will not create any redirect pages for this particular path.
type CreateRedirectsFn = (path: string) => string[] | string | null | undefined;

Example configuration

Here's an example configuration:

docusaurus.config.js

export default {  plugins: [    [      '@docusaurus/plugin-client-redirects',      {        fromExtensions: ['html', 'htm'], // /myPage.html -> /myPage        toExtensions: ['exe', 'zip'], // /myAsset -> /myAsset.zip (if latter exists)        redirects: [          // /docs/oldDoc -> /docs/newDoc          {            to: '/docs/newDoc',            from: '/docs/oldDoc',          },          // Redirect from multiple old paths to the new path          {            to: '/docs/newDoc2',            from: ['/docs/oldDocFrom2019', '/docs/legacyDocFrom2016'],          },        ],        createRedirects(existingPath) {          if (existingPath.includes('/community')) {            // Redirect from /docs/team/X to /community/X and /docs/support/X to /community/X            return [              existingPath.replace('/community', '/docs/team'),              existingPath.replace('/community', '/docs/support'),            ];          }          return undefined; // Return a falsy value: no redirect created        },      },    ],  ],};