NestedRoutes always redirects to not found destination

[wintondeshong]

Problem
When supplying the redirectToIfNotFound property, the application will always redirect to that location.

Solution
Atleast part of the solution is that the NestedRoutes component must have a <Switch> around its' mapped <NestedRoute> and <Redirect>.

In testing make sure your routing table is flat and nested (at least two levels - nested layouts would be even better of a test)

[brandongregoryscott]

Started taking a look at this over the weekend, but I may need to pair up with you to get this sorted out.

I spun up a quick & dirty CRA example with the currently published version of this package, as well as a static build of a branch with the fix. The repo is cra-sandbox

https://github.com/brandongregoryscott/cra-sandbox/tree/master
Deployed from master branch with andculturecode-javascript-react@0.1.1
https://protected-lake-80234.herokuapp.com/

https://github.com/brandongregoryscott/cra-sandbox/tree/support/example-with-switch-bugfix
Deployed from example-with-switch-bugfix branch with the <Switch> wrapper fix on on my fork
https://damp-eyrie-79964.herokuapp.com/

What I'm seeing is:

• On the 'fix' site, only one of the routes (the /about route) is actually being rendered underneath the ApplicationLayout (and trying to hit a route that doesn't exist, like https://damp-eyrie-79964.herokuapp.com/does-not-exist doesn't redirect to the 404 page)

• On the 'fix' site, the UsersLayout is not being rendered at all.

• On the site with the published version of the package, the redirectToIfNotFound partially works - trying to hit https://protected-lake-80234.herokuapp.com/does-not-exist redirects to the 404 page, but incorrectly redirects on a valid route (/users or /users/:id) Looks like the the 404 page is rendered below the ApplicationLayout on screen so it's not obvious, but the url should be /404

Perhaps there's something wrong with the way I have the layouts or routes setup. Looking at the project that this code was originally ported from, I'm now seeing a comment in the route map that notes that layouts that don't want to use the main ApplicationLayout need to be defined before the the root route since it will always match, so that could be a factor. I wonder if there's something we could do to enforce that.

[wintondeshong]

@brandongregoryscott thanks for taking a deep dive into this issue! As you have time we can definitely pair up. Once we get past this initial issue there should definitely be ways to improve the routing (ie. enforcing order)

[brandongregoryscott]

Update: Looks like I have it working now, I think the issue was how props were being passed down from NestedRoutes -> NestedRoute. Though it looked fine from how I had typed everything out, it looks like the 'unauthenticated' version of NestedRoute hangs on the fact that the flattened route props are also passed through, since they are rendered directly to react-router-dom's Route component. Updating the render of NestedRoutes to expand route seemed to fix this.

I'm going to test it out a bit more and see how I can write some automated tests for it, but I think that was it 👍

[wintondeshong]

Released with v0.1.2

[wintondeshong]

Put this through its paces in the boilerplate project and is working well! Thank you! rsm-hcd/AndcultureCode.DotnetReact.Boilerplate#36