How to show default component always in react router

Question

I want to show the header page always in every route.How to do this. I want props.history to be accessible inside that header component so that if i click any thing i can navigate to other page using 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>

);

score 3 · Accepted Answer · answered Sep 24 '18 at 16:21

Use Switch to render one route at a time. If you want history in Header component use withRouter from react-router. (history will be passed as a prop to the header component)

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>

Thanks shubham i am looking for this solution. – Trinu Sep 24 '18 at 16:27 — Trinu, Sep 24 '18 at 16:27

score 0 · Answer 2 · answered Sep 24 '18 at 16:18

0

You can create a Layout container which will render your header. If you set path="/" and without exact, it will render thru all routes.

<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>

answered Sep 24 '18 at 16:18

froston

746
3
20

Thanks for your reply. But i am seeing layout component double time in every route. – Trinu Sep 24 '18 at 16:20

How to show default component always in react router

2 Answers2