react-router-dom nested routes and redirects

Question

I'm trying to expand a bit on the nested routes example over at react training in the quick start guide.

Code sandbox: https://codesandbox.io/s/routing-test-ubpjp

In the code sandbox browser, if you navigate to /some - this works, then click SomeOne - this also works. However, clicking "SomeTwo" which should redirect to "Some" loads blank, why?

Also, those links fail to work right off the bat? There might be some strange stuff in the sandbox as I've been hitting it with random stuff to try and get it working.

I just want to structure the routes such that I don't have to have all of these routes in one file.

I've done a lot of searching and have tried a lot of different kinds of implementations, but all of them end up having issues / problems, either with adding a catch-all route, or redirects.

Removing the props from the Switch worked, but this breaks the AnimatePresence from framer-motion.

Following the example of framer-motion at: https://codesandbox.io/s/framer-motion-x-react-router-n7qhp?file=/src/index.js

The redirect still fails, even with the withRouter hook on the Navigation and redirect component.

Answer 1

You need not pass any props to Switch component. Also make sure that you are rendeing Navigation component as a Route or use withRouter HOC, so that it received Router props.

    <Switch>
        {children}
    </Switch>