如何将反应材料 ui 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;

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

Answer 1

你错过了在康波一个字符n在这里耳鼻喉科：

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

我强烈推荐阅读文档组合链接