我正在使用React Router v5,当我尝试在多个组件之间定义路由时遇到了问题。 我尝试的情况类似于以下内容:
现在的问题是,在自定义
我将路由拆分为此的原因之一是,除了将相关路由组织在一起之外,我还需要单独的路由组件作为独立的组件,以便将一组组件集成到传统 Web 应用程序中。我想避免在此处复制路由。
但显然,我正在做一些你不应该在React Router 中做的事情,尽管我不完全确定为什么会出现这个问题。因此,我希望更多地了解此处的限制,以避免在将来再次遇到此类变化。为什么我不能将路由像这样拆分为单独的组件在单个 Switch 中?这里的确切限制是什么?
是否在每个组件中放置一个单独的 Switch 是正确的答案?从概念上讲,这似乎是错误的,因为每个路由都应该是互斥的,只有一个路由应该被渲染。多个 Switch 组件可以同时呈现多个组件,尽管在实践中不应该发生这种情况,因为路由应该是独占的,不应重叠。
在React Router v5中具有模块化路由的适当和预期方法是什么?
<Switch>
<MyRoutes />
<Route path="/foo">
<Foo />
</Route>
</Switch>
使用以下代码,可创建一个名为MyRoutes
的组件:
<>
<Route path="/bar">
<Bar />
</Route>
<Route path="/baz">
<Baz />
</Route>
</>
现在的问题是,在自定义
MyRoutes
组件之后声明的路由无法正常工作,自定义组件似乎匹配了路由但并没有渲染任何内容。其中的路由确实按预期工作。我将路由拆分为此的原因之一是,除了将相关路由组织在一起之外,我还需要单独的路由组件作为独立的组件,以便将一组组件集成到传统 Web 应用程序中。我想避免在此处复制路由。
但显然,我正在做一些你不应该在React Router 中做的事情,尽管我不完全确定为什么会出现这个问题。因此,我希望更多地了解此处的限制,以避免在将来再次遇到此类变化。为什么我不能将路由像这样拆分为单独的组件在单个 Switch 中?这里的确切限制是什么?
是否在每个组件中放置一个单独的 Switch 是正确的答案?从概念上讲,这似乎是错误的,因为每个路由都应该是互斥的,只有一个路由应该被渲染。多个 Switch 组件可以同时呈现多个组件,尽管在实践中不应该发生这种情况,因为路由应该是独占的,不应重叠。
在React Router v5中具有模块化路由的适当和预期方法是什么?