This package can intercept front-end route jumps, Does not depend on any framework, So you can use it in React, Vue, etc.

todo

 npm i route-interceptor

import { create } from "route-interceptor"; const interceptor = create({ way: ["a", "window.open", "history", "hash", "location"], intercept: (path) => { return path.replace("/bbb", "/ccc"); }, }); interceptor.start();

Intercept Anchor tag jump, if Anchor tag has click event and called preventDefault, Will not be intercepted.

Intercept window.open

Will intercept both history.pushState and history.replaceState

Intercept hash change, such as location.hash = '#some'

Because the origin location object can't be override, intercept set location.href and location.replace, You need to use Babel at the same time or use global object $location to jump.

This is type declaration for $location.

interface Window { $location: Pick<Location, "href" | "replace">; }

Use babel plugin.

// .babelrc.js module.exports = { plugins: ["route-interceptor/plugins/babel"], };

How it works

location.href = "https://www.google.com"; location.replace("https://www.google.com"); // will transform to $location.href = "https://www.google.com"; $location.replace("https://www.google.com");

Only location.href and location.replace will be transformed.

Can't support esbuild-loader, because esbuild transform api does't support plugin.

return a new path to jump, or return false to stop jump