对应的完整路径是 /admin/dashboard。同样，<route path="add-product" element="{} /> 对应的完整路径是 /admin/add-product。adminRoute 的处理: 在 App.js 中，如果你希望 Dashboard 总是渲染在 /admin 路径下，并且 Header 不显示，那么 adminRoute ? :
这种顶层条件渲染可能需要调整。更常见和推荐的做法是，直接在 Routes 内部处理所有路由，让 Dashboard 组件仅在 /admin/* 路径下通过路由匹配来渲染，而 Header 则可以在非 /admin 路径下通过不同的路由匹配或作为非路由组件来显示。在上述优化后的 App.js 中，我将顶层的 Dashboard 渲染移除了，让它完全由 Routes 管理，并仅在 adminRoute 为 false 时渲染 Header，这样可以避免重复渲染 Dashboard 或出现冲突。
总结与注意事项
通过上述修改，当用户访问 /admin/add-product 路径时：
React Router 会匹配到 /admin/* 路由，并渲染 Dashboard 组件。在 Dashboard 组件内部，它会发现 Outlet 组件。React Router 接着会匹配到 Dashboard 的子路由 add-product。最终， 组件将在 Dashboard 的 Outlet 位置（即 .main-content div 内部）被渲染出来。
这种方式的优点在于：
结构清晰: 父子组件的层级关系通过路由配置一目了然。代码解耦: Dashboard 组件不再需要知道它将渲染哪些具体的子组件，它只提供一个 Outlet 占位符。可维护性高: 添加或移除子组件时，只需修改路由配置，无需改动父组件的渲染逻辑。符合 React Router 最佳实践: 充分利用了 React Router 提供的嵌套路由能力。
注意事项：
确保 Dashboard 组件中正确引入了 Outlet。父路由的 path 属性如果需要匹配所有子路径，请使用 /* 通配符。子路由的 path 属性是相对于父路由的，不应包含父路由的完整路径前缀。考虑在 Dashboard 的父路由中添加一个 index 路由，以定义当只访问 /admin 路径时默认渲染的子组件（例如 <route index element="{} />）。
以上就是在 React Router 中利用 Outlet 实现组件嵌套渲染的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1535333.html
微信扫一扫 
支付宝扫一扫 
