React layout component to render specific routes in react router

Asked May 09 '20 at 05:54

Active May 09 '20 at 08:48

Viewed 50 times

I am using Gatsby with @reach/router, I have this simple router

<>
  <Router basepath="/video">
    <Auth path="/assessment/:keyId" />
  </Router>

  <Layout>
    <Router basepath="/video">
      <PrivateRoute path="/register/:keyId" component={Register} />
      <PrivateRoute path="/tutorial/:keyId" component={Tutorial} />
      <PrivateRoute path="/test/:keyId" component={Test} />
      <PrivateRoute path="/questions/:keyId" component={Questions} />
      <PrivateRoute path="/complete/:keyId" component={Complete} />
      <PrivateRoute path="/personality/:keyId" component={Personality} />
      <PrivateRoute path="/results/:keyId" component={Results} />
    </Router>
  </Layout>
</>

And On Layout Component I have as simple as this:

<>
  <Header />
  {children}
</>

The problem is in <Auth/> component. It renders with <Header/> on it. Why? I'm wrapping a specific routes to render with <Layout/>, everything but the <Auth/>. What I am doing wrong? Any solutions?

edited May 09 '20 at 08:48

oozywaters

1,171
1
8
17

asked May 09 '20 at 05:54

MMJ

You have same `basepath` for both the `Router` that render `Auth` and `Layout`. – Utsav Patel May 09 '20 at 06:23
@UtsavPatel Yes, for a reason I want to wrap some routes with Layout but not all of them – MMJ May 09 '20 at 10:37

React layout component to render specific routes in react router

0 Answers0