Как всегда показывать компонент по умолчанию в реагирующем маршрутизаторе

Question

Я хочу показывать заголовок страницы всегда на каждом маршруте. Как это сделать.Я хочу, чтобы props.history был доступен внутри этого компонента заголовка, чтобы при нажатии на любую вещь я мог перейти на другую страницу с помощью 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

Используйте Switch для визуализации одного маршрута за раз.Если вы хотите историю в компоненте Header, используйте 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>