Incorporating conditional logic using matchPath from React Router is my current task.
I am in the process of defining a function for this purpose.
import { matchPath } from "react-router";
export const MyKey = {
Foo: "foo",
Bar: "bar",
Home: "",
} as const;
export const subPageMatch = (
key: // the key can be `foo` or `bar`,
path: string,
) => {
return !!matchPath(path, {
path: `/${key}/:subPage`,
});
};
The scenarios I need to validate are:
http://localhost:3000/foo/sub // should return `true`
http://localhost:3000/bar/sub // should return `true`
http://localhost:3000/test/sub // should return `false`
http://localhost:3000/foo/sub/anothersub // should also return `true`
How do I structure this function to have a conditional parameter?
And then how can I utilize it like this:
const test = subPageMatch(---> here should evaluate to one of the values of the object MyKey, pathname);
Thus, the first argument can only be either
"foo" || "bar"
.