Reactjs 交换机内部的自定义路由/重定向未按预期工作 工作代码示例 const Routes=（）=>( {/*某些路由*/} ) 将重定向提取到自定义组件（不工作）

注意：与您在接受的答案中看到的

路由组件发生相同的行为

const路由：React.FC=（）=>(
{/*某些路由*/}
)
}
const RemoveTrailingSlash=（）=>(
)

为什么不能在
开关
组件内使用自定义
重定向
或
路由
组件

请参见此处的示例代码：
Switch
组件呈现与子组件匹配的第一条路由。记住这一点，让我们来看看问题中包含的两个示例之间的差异

第一个代码示例（工作）
这样做将得到与第二个非工作代码示例相同的结果，因为现在
重定向
组件将始终是
开关
组件呈现的第一个匹配组件

<Redirect 
  to={location.pathname.replace(/\/+$/, location.search)}
/>

return (
  <>
    <RemoveTrailingSlash />
    <Switch>
      {/* Some routes */}
    </Switch>
  </>
)

第二个代码示例（不工作）
您能解释一下您在
RemoveTrailingSlash
组件中想做什么吗？您试图从哪个路由重定向？您试图重定向到哪个路由？
RemoveTrailingSlash
组件下面的路由不会被渲染，因为
开关
。尝试将
移动到
开关
组件上方。由于
开关
组件，仅呈现
第一个
组件，
开关
组件停止在
第一个
组件之后寻找匹配的组件。看到这个，谢谢分享这个例子。真的很清楚，也许在答案中也包括它。因此这是
开关
组件的预期行为，而
from
关键字只是一个有条件的呈现。谢谢
const Routes: React.FC = () => {
   const location = useLocation();
    
   return (
     <Switch>
       <RemoveTrailingSlash />
       {/* Some routes */}
     </Switch>
   )
}
    
export const RemoveTrailingSlash = () => { ... }

return (
  <>
    <RemoveTrailingSlash />
    <Switch>
      {/* Some routes */}
    </Switch>
  </>
)