在父级上呈现子组件

Question

我需要使用其他路径渲染组件，但此组件不得覆盖所有页面。例如，我从stackoverflow列表中点击了一些问题，而且我将从右到左模态接收动画，我还需要更改路径

React路由器（我正在使用V4）

export default (
  <Switch>
    <App>
      <Route exact={true} path="/" component={App} />
      <Route exact={true} path="/product/:id" component={Product}/>
    </App>
  </Switch>
);

我的产品容器看起来像

export default function productContainer(ChildComponent) {
  class ProductContainer extends Component {
    render = () => {
      return <ChildComponent/>
    }
  }

  return ProductContainer;
}

我的产品组件

class Product extends Component {
  render = () => {
    return ("")
  }
}

export default productContainer(Product);

当我模仿上面描述的情况时，我的页面完全重新出现，我看不到我的应用程序组件页面

有任何想法，我如何解决这个问题？

Answer 1

人们已经问过如何在反应路由器之前将模态渲染为路线而不重新渲染（现在无法找到讨论）。基本上使用react-router这是不可能的。每次路线更改都会导致重新渲染。也就是说，你可以通过嵌套路线来做你想做的事。

每个组件都可以返回路径，因此通过使用合成，您可以选择渲染任何路径的位置。

例如，

export default (
  <Switch>
    <App>
      <Route path="/" component={App} />
    </App>
  </Switch>
);

在<App />内 -

render() {
    return (
        <Something>
            <PageHeader />
            <Switch>
                <Route path="/product/:id" component={Product}/>
            </Switch>
        </Something>
    );
}

所以你可以看到，如果你要在App组件中添加你的路由，他们都可以共享一个共同的页面布局。

请记住：任何组件都可以在Switch内返回多条路由或只返回一条路由！ Switch只会渲染匹配的第一条路线。

还要记住：交换机内的路由必须是直接的孩子，你不能Switch -> App -> Route，它必须始终是直接的孩子，如Switch -> Route

Answer 2

在路线中使用渲染属性而不是组件。

<activation-config-property>
  <activation-config-property-name>sslCipherSuite</activation-config-property-name>
  <activation-config-property-value>xxx</activation-config-property-value>
<activation-config-property>