score:0

issue

you are rendering the routes and the links to them into two separate routing contexts. only a single routing context is necessary for the entire react application.

also, you likely don't need both a hashrouter and a browserrouter. pick the one the suits your app's needs.

solution

render all the routes and links into a single routing context. lift the hashrouter/browserrouter up the reacttree such that only a single router is wrapping both the app rendering the routes and the sidemenu components.

example:

index.js

<browserrouter>
  <sidemenu />
  <app />
</browserrouter>

app

function app() {
  return (
    <div classname="app">
      <switch>
        <route path="/consultas"> 
          <consultas />
        </route>
        <route path="/diagnosticos" component={diagnosticos} />
        <route path="/noticias" component={noticias} />
        <route path="/configs" component={configuracoes}/ >
        <route path="/">
          <home />
        </route>
      </switch>
    </div>
  );
}

export default app;

sidemenu

function sidemenu() {
  return (
    <div id="sidemenu">
      <img src={require('./hwbc.png')} alt="" />
      <hr />
      <h1>menu</h1>
      <ul>
        <li><navlink exact to="/">home</navlink></li>
        <li><navlink to="/consultas">consultas</navlink></li>
        <li><navlink to="/diagnosticos">diagnostiocos</navlink></li>
        <li><navlink to="/noticias">noticias</navlink></li>
        <li><navlink to="/configs">configuracoes</navlink></li>
      </ul>
    </div>
  )
};

export default sidemenu;

Related Query

More Query from same tag