Home > react-nav-router > NavRouterProps > renderCommon

NavRouterProps.renderCommon property

渲染公共布局容器，用于包裹路由视图

此函数允许在路由视图外层包裹自定义的公共布局（如页眉、侧边栏等）， 使得所有路由页面都能共享相同的外层结构。与 NavStack 的 renderCommon 不同， 此函数还能访问当前路由的路径信息，可以根据路由动态调整布局。

Signature:

renderCommon?: (children: React__default.ReactElement, path?: string) => React__default.ReactElement;

Example

<NavRouter
  router={router}
  render={(path) => <PageComponent path={path} />}
  renderCommon={(children, path) => (
    <div className="layout">
      <Header currentPath={path} />
      <aside className="sidebar">
        <Navigation activeRoute={path} />
      </aside>
      <main className="content">
        {children}
      </main>
    </div>
  )}
/>