Cannot create default exact Route component inside a Switch

Version

4.2.0

Test Case

https://codesandbox.io/s/kxk110lqy3

Steps to reproduce

1. Define an ExactRoute component:const ExactRoute = ({exact, ...rest}) => <Route exact={true} {...rest} />
2. Use a bunch of Route inside a Switch (this bug does not apply when no Switch are used)
3. Among those routes, define one using ExactRoute, for instance: <ExactRoute path="/about" component={About} />

Expected Behavior

I am trying to circumvent the fact that exact defaults to false (see #4958) by creating my own ExactRoute component. I would expect my ExactRoute component to match only if it is an exact match.

Actual Behavior

If you go to /about/me (a non-exact match), the About component will render

Alternatively, the matching will be exact only if exact is an argument of ExactRoute: <ExactRoute exact path="/about" component={About} />

[timdorr]

I added a small clarification there.

[nfantone]

@timdorr

So, you can’t wrap a Route component and pass it to a Switch, unfortunately.

May I ask again why not? We are doing this in pretty much every project we have and seems to be working fine for us.

<Switch>
      <Route
        exact
        path="/login"
        render={props =>
          isAuthenticated() ? (
            <Redirect to={{ pathname: '/myfiles', from: props.location }} />
          ) : (
            <LoginPage {...props} />
          )
        }
      />
      <Route exact path="/logout" component={LogoutPage} />
      <PrivateRoute exact path="/myfiles" component={MyWCABFilesPage} />
      <PrivateRoute exact path="/search" component={SearchPage} />
</Switch>

The above behaves just like you’d expect. PrivateRoute is a Route wrapper that redirects users to /login if they are not authenticated.