How to fix this bug with React Link and Routes

Question

This is the code were the Links are not active in the browser: I think I might be utilizing incorrectly the Link components and the Route components. All the components of this App are written correctly and they render in other configurations but I would like to use the Toolbar component and be able to activate this links with Routes and so on.

import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import SearchIcon from '@material-ui/icons/Search';
import Typography from '@material-ui/core/Typography';
import Link from '@material-ui/core/Link';
import Composers from '../components/Composers';
import Composer1 from '../components/Composer1';
import Composer2 from '../components/Composer2';
import QuienesSomos from '../components/QuienesSomos';
import { HashRouter as Router, Route} from 'react-router-dom';
import Blog2 from '../components/Blog2'
import ForumContainer from '../containers/ForumContainer'
import HeaderContainer from '../components/HeaderContainer'
import Toolbar from '@material-ui/core/Toolbar';
import NavBar from '../components/NavBar'
import { CenterFocusStrong } from '@material-ui/icons';
import { Switch} from 'react-router-dom'



const useStyles = makeStyles((theme) => ({
  toolbar: {
    borderBottom: `1px solid ${theme.palette.divider}`,
  },
  toolbarTitle: {
    flex: 1,
  },
  toolbarSecondary: {
    justifyContent: 'space-between',
    overflowX: 'auto',

  },
  toolbarLink: {
    padding: theme.spacing(1),
    flexShrink: 0,
  },
  div: {
    justifyContent: 'center'
  }
}));

export default function Header(props) {
  const classes = useStyles();
  const { sections, title } = props;

  return (
  
    <React.Fragment>
      <Toolbar className={classes.toolbar}>
        <Button size="small">Subscribe</Button>
        <Typography
          component="h2"
          variant="h5"
          color="inherit"
          align="center"
          noWrap
          className={classes.toolbarTitle}>
          {title}
        </Typography>
        <IconButton>
          <SearchIcon />
        </IconButton>
        <Button variant="outlined" size="small">
          Sign up
        </Button>
      </Toolbar>
      <Toolbar component="nav" variant="dense" className={classes.toolbarSecondary}>
        <Link to='/quienessomos'>  Quienes Somos  </Link>
        <Link to='/compositores'>  Compositores  </Link>
        <Link to='/blog'>  Blog  </Link>
        <Link to='/forum'>  Forum  </Link>
        <Switch>
        <Route exact path='/quienessomos'> <QuienesSomos/></Route>
        <Route exact path='/compositores'> <Composers/></Route>
        <Route exact path='/composer1'> <Composer1/></Route>
        <Route exact path='/composer2'> <Composer2/></Route>
        <Route exact path='/blog'> <Blog2/></Route>
        <Route exact path='/forum'> <ForumContainer/></Route>
        </Switch>
      </Toolbar>      
    </React.Fragment>
  );
}

Header.propTypes = {
  sections: PropTypes.array,
  title: PropTypes.string,
};

Answer 1

1. Link is used Here but it is not a Link component from material-ui, I use import { Link } from ' react-router-dom'. If you want to style your menu then I suggest you read here https://material-ui.com/guides/composition/#link.
2. as Far as I can tell from my little experience, shoving your navbar and main content into one component is a bad practice, separate your components (menu and main content), into different functions, and preferably into different files.
3. As I understand it, you need to wrap your application in import { Router } from 'react-router-dom'.

export default function Header (props) {
  const classes = useStyles()
  const { sections, title } = props

  return (
    <React.Fragment>
      <Router>
        <Toolbar className={classes.toolbar}>
          <Button size='small'>Subscribe</Button>
          <Typography
            component='h2'
             
            ...

          <Link to='/compositores'> Compositores </Link>
          <Link to='/blog'> Blog </Link>
          <Link to='/forum'> Forum </Link>
        </Toolbar>
        <Switch>
          <Route path='/quienessomos'>
            <div>quienessomos</div>
          </Route>
          <Route path='/compositores'>
            <div>compositores</div>
          </Route>
          <Route path='/composer1'>
            <div>composer1</div>
          </Route>
          <Route path='/composer2'>
            <div>composer2</div>
          </Route>
          <Route path='/blog'>
            <div>blog</div>
          </Route>
          <Route path='/forum'>
            <Forum />
          </Route>
        </Switch>
      </Router>
    </React.Fragment>
  )
}
`