如何使用 React Link 和 Routes 修复此错误

Question

这是链接在浏览器中未激活时的代码： 我想我可能错误地使用了 Link 组件和 Route 组件。 此应用程序的所有组件均已正确编写并以其他配置呈现，但我想使用工具栏组件并能够通过路由等激活此链接。

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. 这里使用了链接，但它不是来自material-ui的链接组件，我使用import { Link } from ' react-router-dom'。如果你想设计你的菜单，那么我建议你阅读这里https://material-ui.com/guides/composition/#link。
2. 据我所知，将导航栏和主要内容放在一个组件中是一种不好的做法，请将组件（菜单和主要内容）分离到不同的功能中，最好放在不同的文件中。李>
3. 据我了解，您需要将应用程序包装在 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>
  )
}
`