My navigation bar has a routing issue that I'm trying to solve. Currently, the router only responds when the route is manually typed in the search bar. Clicking on the tabs does not redirect properly, except for the home button tab.
import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
Typography from '@material-ui/core/Typography';
InputBase from '@material-ui/core/InputBase';
SearchIcon from '@material-ui/icons/Search';
import Link from '@material-ui/core/Link';
import logo from '../assets/mainLogo2.png';
Avatar from '@material-ui/core/Avatar';
CssBaseline from '@material-ui/core/CssBaseline';
import useStyles from './NavigatorStyles';
import { Link as Nav, Route, Switch, Redirect } from 'react-router-dom';
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;
I had to change the Link for the react router to "Nav" because there was a naming conflict between both elements.