Reactjs 使用布局在react router route中渲染时无限渲染

我有一个小应用程序，看起来像这样：

App.js

const Layout = ({ children }) => (
  <ParentComponent>
    {children}
  </ParentComponent>
)

class App extends Component {
  render(){
    return (
     <BrowserRouter>
      <Switch>
        <Route
            exact
            path="/route/:1"
            render={(props) => (
              <Layout>
                <ChildComponent {...props} />
              </Layout>
            )}
          />
      </Switch>
     </BrowserRouter>
    )
  }
}

---

你知道为什么它是这样工作的而不是布局吗？

在你的例子中，这两种用法都是有效的。问题一定是

Layout

，确保没有任何奇怪的地方，例如

ParentComponent

。通常不能在

布局中引用子组件，因为该组件应该通过
子组件在路由内部实现。
<Switch>
  <Route
    exact
    path="/route/:1"
    component={ChildComponent}
   />
</Switch>