Question

我想始终在每条路线中显示标题页。如何执行此操作。我希望props.history可以在该标头组件中访问，这样，如果我单击任何东西，都可以使用props.history.push（）;

导航到其他页面。

some_client.my_boards

）;

Answer 1

使用“开关”一次渲染一条路线。如果要在Header组件中使用历史记录，请使用react-router中的withRouter。（历史记录将作为道具传递给标头组件）

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>

Answer 2

您可以创建一个Layout容器来呈现标题。如果设置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>

如何在React Router中始终显示默认组件

2 个答案: