如何將反應材料 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}>

我強烈推薦閱讀文檔組合鏈接