reactjs - react-router-dom 嵌套路由和重定向

Question

我正在尝试在快速入门指南中的反应训练中对嵌套路由示例进行一些扩展。

代码沙箱：https ://codesandbox.io/s/routing-test-ubpjp

在代码沙箱浏览器中，如果您导航到 /some - 这有效，然后单击 SomeOne - 这也有效。但是，单击应该重定向到“Some”的“SomeTwo”会加载空白，为什么？

此外，这些链接无法立即工作？沙盒中可能有一些奇怪的东西，因为我一直在用随机的东西来尝试让它工作。

我只想构建路线，这样我就不必将所有这些路线都放在一个文件中。

我进行了很多搜索并尝试了很多不同类型的实现，但所有这些最终都遇到了问题/问题，无论是添加一条包罗万象的路线还是重定向。

从 Switch 中移除道具是可行的，但这会破坏帧运动中的 AnimatePresence。

以 framer-motion 为例：https ://codesandbox.io/s/framer-motion-x-react-router-n7qhp?file=/src/index.js

即使在导航和重定向组件上使用 withRouter 挂钩，重定向仍然失败。

Answer 1

您无需将任何道具传递给 Switch 组件。还要确保您将Navigation组件渲染为 Route 或 use withRouter HOC，以便它接收 Router 道具。

    <Switch>
        {children}
    </Switch>