將子組件渲染到父組件上

Question

我需要使用另一條路線渲染組件，但是該組件不能覆蓋所有頁面。 例如，我單擊了stackoverflow列表中的某個問題，然后我將收到從右到左模態的動畫，並且我還需要更改路線

反應路由器（我正在使用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);

當我模擬情況時（如上所述），我的頁面被完全重印了，而我的App組件頁面卻看不到

有什么想法，如何解決這個問題？

Answer 1

人們之前曾問過如何在無反應路由器中將模態作為路徑而不重新渲染（目前找不到討論）。 從根本上說，這是不可能的。 每次路線更改都會導致重新渲染。 也就是說，您可以通過嵌套路線來做自己想做的事情。

每個組件都可以返回路線，因此，通過使用合成，您可以選擇在何處渲染任何路線。

例如，

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

使用render屬性代替Route中的組件。

<Route exact={true} path="/" render={() => (
   <div>
      <App />
      <Route exact={true} path="/product/:id" component={Product}/>
   </div>
)} />