如何在反应路由器中始终显示默认组件

Question

我想在每个 route.How 中始终显示 header 页面来执行此操作。我希望 props.history 可以在 header 组件内部访问，这样如果我单击任何东西，我可以使用 props.history.push();

导航到其他页面

     <BrowserRouter>

    <div>
      <Header/> // I want history in this component
        <Route exact path="/" component={HomePage} />
        <Route  path="/page1" component={Page1} />
        <Route path="/page2" component={Page2} />

    </div>
</BrowserRouter>

);

Answer 1

您可以创建一个 Layout 容器来呈现您的 header。如果您设置 path="/" 而没有设置 exact，它将通过所有路由呈现。

<BrowserRouter>
  <div>
    <Route path="/" component={Layout} />
    <Route exact path="/" component={HomePage} />
    <Route exact path="/Picklistscreen" component={PickListArea} />
    <Route exact path="/scanarea" component={ScanArea} />
  </div>
</BrowserRouter>

Answer 2

使用 Switch 一次渲染一条路线。如果您想要 Header 组件中的历史记录，请使用 react-router 中的 withRouter。（历史将作为道具传递给 header 组件）

https://reacttraining.com/react-router/web/api/withRouter

/* header component */
import { withRouter } from 'react-router'
export default withRouter(Header)

/* router component */
<BrowserRouter>
    <div>
        <Header/> // I want history in this component
        <Switch>
            <Route exact path="/" component={HomePage} />
            <Route  path="/Picklistscreen" component={PickListArea} />
            <Route path="/scanarea" component={ScanArea} />
        </Switch>
    </div>
</BrowserRouter>

如何在反应路由器中始终显示默认组件

How to show default component always in react router

javascript

reactjs

react-router-v4

react-router-dom