如何将 React Material ui Link 与 React Router Link 集成

Question

我有一个正在尝试修复的导航栏。问题是路由器仅在您在搜索栏中键入路由时才起作用。当我单击选项卡时，它不会重新路由。只有主页按钮选项卡有效，其他按钮无效

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>
                    <Link compoent={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;

如您所见，我将 react 路由器的链接更改为 Nav，因为这两个名称相互干扰。

Answer 1

您在此处的 component 中错过了一个字符：

<Link compoent={Nav} to="/animeList" variant="button" color="inherit" className={classes.link}>

我强烈推荐阅读文档composition link