react-router-config does not match on later paths even if there is an exact path match later

[terencechow]

Version

4.1.1

Test Case

None

Steps to reproduce

Create a react-router-config that has the following:

    [{ component: someAuthorizedLayout
        routes: [
            {component: AuthorizedDashboard, path: '/home, exact: true}
       ]
     },
     { component: UnauthorizedLayout
         routes: [
            {component: Login, path: '/', exact: true}
        ]
     }]

Try to go to '/' and you are unable to. Why? Because the route matches the first route and "consumes" the request before it realizes that there is a '/' exact match

Expected Behavior

I expect it to go to the Login page.

Actual Behavior

It goes to no route because it traverses the routes tree and when it hits someAuthorizedLayout it finds no nested routes that match.

Is this a bug? or is this by design?

[timdorr]

This does appear to be a bug in rrc. We're not doing any testing of that form of routes, so the first step would be to add a failing test. Then we can go about fixing for it.

Edit: Why are people thumbs-downing me? 😭

[terencechow]

@timdorr renderRoutes uses Switch internally and on documentation it says Switch is supposed to match exclusively.

If you are saying this is a bug, that means renderRoutes should not use Switch internally. Is that correct? Are there any requirements for renderRoutes to use Switch internally? I need this context before looking into possible solutions... If there is a requirement for renderRoutes to use Switch internally then I don't see a possible solution since by definition Switch is supposed to match exclusively.

Please advise. I can see if I can help contribute to fixing this bug but need more info. Thanks

[Evgenyx82]

You can workaround this... set flag (variable) as UnauthorizedLayout/someAuthorizedLayout into routes config. Then use matchRoutes, to find matched route, check flag, then do redirect with some status if fail, or just render if it success )...

here is example:

const routes = [
  { component: Root,
    routes: [
      { path: '/',
        exact: true,
        component: App,
        loadData: (dispatch) => new Promise((resolve, reject) => {
          dispatch(setCounter(44));
          resolve('loadData set counter');
        })
      },
      { path: '/courses',
        component: Wrapper,
        routes: [
          { path: '/courses',
            exact: true,
            component: Courses,
            loadData: (dispatch) => new Promise((resolve, reject) => {
              dispatch(fetchCourses(() => { // pass promise callback 
                resolve('loadData set courses');
              }));
            })
          },
          { path: '/courses/public',
            component: CoursesPublic,
            auth: false
          },
          { path: '/courses/draft',
            component: CoursesDraft,
            auth: true
          }
        ]
      },
    ]
  }
]

[mjackson]

I believe renderRoutes should not be using a <Switch> internally, but rather should return an array of <Route> elements.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.