score:0

Accepted answer

as far as your task is understood, you want to render header and render different pages under it. this can be done, for example, as follows:

const amasia = () => (
  <div>amasia</div>
);

const product = ({ match }) => (
  <div>
    page number: {match.params.page}
  </div>
);

const header = () => (
  <header>
    <nav>
      <link to="/">amasia</link>
      <link to="/mens/hat/1">product</link>
    </nav>
    <div>logo</div>
    <div>formsearch</div>
    <div>butsearch</div>
  </header>
);

const app = () => (
  <>
    <header />
    <main>
      <switch>
        <route exact path="/" component={amasia} />
        <route exact path="/mens/hat/:page" component={product} />
      </switch>
    </main>
  </>  
);

const rootelement = document.getelementbyid("root");

reactdom.render(
  <router>
    <app />
  </router>,
  rootelement,
);

score:0

now you can render any component in a separate method.

in your nav.tsx file just define a function as follows.

function amasia({ match }) {
  return (
    <header>
       <nav> <nav/>
       <logo/>
       <formsearch params={""} />
       <butsearch match={match} />
    </header>
  );
}
function product({ match }) {
  return (
    <fragment>
       <header>
         <nav> <nav/>
         <logo/>
         <formsearch params={""} />
         <butsearch match={match} />
       </header>
       <head match={match} />
    </fragment>
  );
}

and replace the previous route line

<route exact path="/" component={amasia} /> 
<route exact path="/mens/hat/:pagelist" component={product} /> 

Related Query

More Query from same tag