conditionally render different method in react component based on URL

Question

Im not too sure how to state this question (also not sure if there is a better way to achieve this) but--

I have a header component:

<header>
header
</header>

now I have 2 different pages that will be using different variations of the header component...

Currently, I have dry code where I have imported the header component into one of the pages, though into the other I have it hardcoded though the changes are edited...

I was wondering how I can do it like:

<header>
if('/'){
return header a
}else if('/settings'){
return header b
}
</header>

Answer 1

Use router to specified URL and do conditional

    <header >
      {router.route === '/settings' ? (
      settings header
      ) : (
      default header
      )}
      <header/>