如何整合React Material UI Link与React Router Link及导航栏路由修复

我一眼就发现了问题的根源——你在Anime List对应的<Link>组件里，把属性名component拼写成了compoent（少了一个字母'n'）！这就是为什么只有Home标签能正常跳转，其余标签点击毫无反应的原因。

Material-UI的<Link>组件需要通过component属性指定React Router的Nav（也就是你重命名后的路由Link组件），才能让点击行为触发路由切换。拼写错误导致这个配置完全失效，点击Anime List标签时，它只是个普通的文本节点，根本不会触发路由跳转。

修正后的完整代码 #

import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import InputBase from '@material-ui/core/InputBase';
import SearchIcon from '@material-ui/icons/Search';
import Link from '@material-ui/core/Link';
import logo from '../assets/mainLogo2.png';
import Avatar from '@material-ui/core/Avatar';
import CssBaseline from '@material-ui/core/CssBaseline';
import useStyles from './NavigatorStyles';
import { Link as Nav, Route, Switch, Redirect } from 'react-router-dom';
import Home from '../home/Home';
import AnimeList from '../animeList/AnimeList'
import NotFound from '../404/NotFound';

function Navigator() {
 const classes = useStyles();
 return (
  <div className={classes.root}>
   <CssBaseline />
   <AppBar position="static" color="primary" className={classes.appBar}>
    <Toolbar className={classes.toolbar}>
     <Avatar src={logo} />
     <Typography variant="h6" color="inherit" noWrap className={classes.toolbarTitle}>Anime Search</Typography>
     <nav>
      <Link component={Nav} to="/" variant="button" color="inherit" className={classes.link}>
       Home
      </Link>
      {/* 这里修正了拼写错误：compoent → component */}
      <Link component={Nav} to="/animeList" variant="button" color="inherit" className={classes.link}>
       Anime List
      </Link>
     </nav>
     <div className={classes.search}>
      <div className={classes.searchIcon}>
       <SearchIcon />
      </div>
      <InputBase placeholder="Search…" classes={{ root: classes.inputRoot, input: classes.inputInput, }} inputProps={{ 'aria-label': 'search' }} />
     </div>
    </Toolbar>
   </AppBar>
   <Switch>
    <Redirect exact from="/" to="/home" />
    <Route component={Home} path="/home" />
    <Route component={AnimeList} path="/animeList" />
    <Route component={NotFound} path="*" />
   </Switch>
  </div>
 );
}

export default Navigator;

另外补充一个小优化：你的路由规则里，根路径/会重定向到/home，而Home标签的to属性是"/"，点击后会先跳转到/再重定向到/home，这没问题，但如果想更直接，也可以把Home标签的to改成"/home"，这样能少一次重定向步骤。

内容的提问来源于stack exchange，提问作者stanley pena