React Router code to persist the global components in all the pages

router.jsx

const routes = [
  { path: '/one',
    component: One
  },
  { path: '/two',
    component: Two
  },
  { path: '/three',
    component: Three
  }
]

<Router>
  <div>
    <Switch>
      {routes.map(route => (
        <Route path={route.path} component={Header}/>
      ))}
    </Switch>
    <Switch>
      {routes.map(route => (
        <Route path={route.path} component={Sidebar}/>
      ))}
    </Switch>

    <Switch>
      {routes.map(route => (
        <Route path={route.path} component={route.component}/>
      ))}
      <Route component={NoMatch}/>
    </Switch>
  </div>
</Router>

I found this useful information while research an answer for this StackOverflow question.

Useful Resources :-

• remix-run/react-router#4578
• remix-run/react-router#3928