[Bug]: Match route does not work if there is a minus sign at the beginning

[kulakowka]

What version of React Router are you using?

6.2.1

Steps to Reproduce

<Routes>
      <Route path="/users/:id" element={<UserApp />} />
</Routes>

Expected Behavior

/users/-wYVsb1KDtT9YJJFUiSTq0dqUyvc5vK51nx7QW29CPJc - This route is matched

Actual Behavior

/users/-wYVsb1KDtT9YJJFUiSTq0dqUyvc5vK51nx7QW29CPJc - This route is NOT matched

/users/wYVsb1KDtT9YJJFUiSTq0dqUyvc5vK51nx7QW29CPJc - This route is matched

I think the problem is in the mechanism that is looking for a suitable route.

Anything that starts with a symbol - is not matched.

[ivansvlv]

I've just noticed the same bug, but I have a "." in the route.
e.g. this wouldn't match to the path - login/reset/:resetToken:
login/reset/Djdfsd32afasdg.kdaf324asdf.adsgGsd
however this path - login/reset/:resetToken/success will be matched:
login/reset/Djdfsd32afasdg.kdaf324asdf.adsgGsd/success

Update
Since my error was actually 404, it's actually a problem with Vite's local dev server, and I've found Issue and PR in their repo for similar behaviour with "." in the URL.

[kulakowka]

@mjackson Sorry to bother you. This bug is critical for us. We have already uploaded the new version of our application to production. Please pay attention to this problem. Probably there is an error somewhere in the regular expressions. Surely this can be fixed very quickly.

[benkraus]

remix-run/remix#819 relates here. We had to hack that patch in (probably breaking something else wrt routing) in order to get .well-known paths to match correctly.

[edbella]

Update: This also breaks when there is a - at the end as well, not just at the beginning

[seeden]

Same problem for @ character at the beginning

[zwily]

In Remix, I can't use a splat path on any path with a hyphen anywhere in it. So, app/routes/cdn-cgi.image.$.js does NOT work for matching /cdn-cgi/image/foo, but app/routes/cdncgi.image.$.js DOES match /cdncgi/image/foo. Sounds like it's possibly related.

[joacub]

same here, urls with @ in the beginning does not work, this was working before, what happened ?

thanks in advance

[joacub]

Is there any advance on this, I can’t update my application becouse of this.

[egerrek]

I have problem with cyrillic symbols. The route beginning with the Cyrillic character is not found.

Steps to Reproduce

<Route path="/users/:id" element={} />

Expected Behavior
/users/михаил - This route is matched

Actual Behavior
/users/михаил - This route is NOT matched

/users/michael - This route is matched

[dartandrevinsky]

I have problem with cyrillic symbols. The route beginning with the Cyrillic character is not found.

Steps to Reproduce Expected Behavior /users/михаил - This route is matched

Actual Behavior /users/михаил - This route is NOT matched

/users/michael - This route is matched

Try and analyze the regexes in play yourself - maybe you will be able to spot the error, file a PR, or - fork the repo and use it as a dependency directly:

react-router/packages/react-router/index.tsx

Lines 1188 to 1231 in a7a77da

	function compilePath(
	path: string,
	caseSensitive = false,
	end = true
	): [RegExp, string[]] {
	warning(
	path === "*" || !path.endsWith("*") || path.endsWith("/*"),
	`Route path "${path}" will be treated as if it were ` +
	`"${path.replace(/\*$/, "/*")}" because the \`*\` character must ` +
	`always follow a \`/\` in the pattern. To get rid of this warning, ` +
	`please change the route path to "${path.replace(/\*$/, "/*")}".`
	);
	let paramNames: string[] = [];
	let regexpSource =
	"^" +
	path
	.replace(/\/*\*?$/, "") // Ignore trailing / and /*, we'll handle it below
	.replace(/^\/*/, "/") // Make sure it has a leading /
	.replace(/[\\.*+^$?{}|()[\]]/g, "\\$&") // Escape special regex chars
	.replace(/:(\w+)/g, (_: string, paramName: string) => {
	paramNames.push(paramName);
	return "([^\\/]+)";
	});
	if (path.endsWith("*")) {
	paramNames.push("*");
	regexpSource +=
	path === "*" || path === "/*"
	? "(.*)$" // Already matched the initial /, just match the rest
	: "(?:\\/(.+)|\\/*)$"; // Don't include the / in params["*"]
	} else {
	regexpSource += end
	? "\\/*$" // When matching to the end, ignore trailing slashes
	: // Otherwise, match a word boundary or a proceeding /. The word boundary restricts
	// parent routes to matching only their own words and nothing more, e.g. parent
	// route "/home" should not match "/home2".
	"(?:\\b|\\/|$)";
	}
	let matcher = new RegExp(regexpSource, caseSensitive ? undefined : "i");
	return [matcher, paramNames];
	}

[knpwrs]

This bug is what causes this: remix-run/remix#2012