React Router路由冲突解决方案：如何根据参数路由到不同组件

Hey Leo, I see the issue you're running into—React Router is treating /dashboard/new as a match for the dynamic /dashboard/:dashboardId route, right? Let's break down why this happens and how to fix it properly.

Why the Conflict Occurs #

The Switch component in React Router matches routes in the order they're defined, but dynamic parameters like :dashboardId will happily accept any string (including "new") as a valid value. Even though you've added exact to both routes, edge cases like unintended trailing slashes or nested routing could still cause the dynamic route to catch the /dashboard/new path.

Solution 1: Confirm Static Route Priority (You're Already on the Right Track) #

Your current code has the correct core idea—placing the static /dashboard/new route before the dynamic /dashboard/:dashboardId route. The Switch stops at the first matching route, so as long as this order is maintained, /dashboard/new should render CreateDashboardPage without falling through to the dynamic route.

Quick checks to rule out edge cases:

• Make sure there are no nested Router or Switch components elsewhere overriding this behavior
• Verify there are no typos in your path strings (extra spaces, missing slashes, etc.)

Solution 2: Add a Regex Constraint to the Dynamic Route #

To add an extra layer of safety (and guard against accidental order changes later), you can use a regular expression to explicitly exclude "new" from being a valid dashboardId. This tells React Router the dynamic parameter can't be exactly "new".

Here's the updated route configuration:

<Router>
  <div>
    <Switch>
      <Route path="/dashboard/new" exact component={CreateDashboardPage}/>
      {/* Use negative lookahead regex to block "new" as a valid dashboardId */}
      <Route path="/dashboard/:dashboardId(?!new)" exact component={DashboardPage} />
      <Route component={NotFoundPage}/>
    </Switch>
  </div>
</Router>

The (?!new) part is a negative lookahead assertion—it ensures the value of dashboardId isn't exactly "new". This way, even if the route order was accidentally reversed (which we don't recommend!), /dashboard/new won't match the dynamic route.

Bonus: Handle Trailing Slashes #

If users might navigate to /dashboard/new/ (with a trailing slash), the exact prop will cause it to miss the static route. Fix this by either:

• Adding a redirect from /dashboard/new/ to /dashboard/new
• Removing the exact prop from the static route (since /dashboard/new is more specific than the dynamic route, the Switch will still match it first)

内容的提问来源于stack exchange，提问作者leo