打字稿材料 ui 导航栏不起作用

Question

嗨，我是打字稿的新手，正在尝试使用 react 实现导航栏。代码编译没有 y 错误但是当我点击导航栏中的选项卡时，由于某种原因没有任何反应。虽然正在显示主页。有人可以解释一下问题是什么吗？谢谢

import React from "react";
import Market from "containers/Market";
import Coins from "containers/Coins";
import PoweredBy from "components/PoweredBy";
import MarketProvider from "store/MarketProvider";
import Exchanges from "components/Exchanges";
import { BrowserRouter as Router, Route, Redirect, Switch, Link, LinkProps } from 'react-router-dom';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Button from '@material-ui/core/Button';
import { default as Tab, TabProps } from '@material-ui/core/Tab';

import HomeIcon from '@material-ui/icons/Home';
import CodeIcon from '@material-ui/icons/Code';
import TimelineIcon from '@material-ui/icons/Timeline';



const LinkTab: React.ComponentType<TabProps & LinkProps> = Tab as React.ComponentType<TabProps & LinkProps>;

function NavBar() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
    setValue(newValue);
  };

  return (
  <div >
  <AppBar position="static" >
  <Tabs value={value} onChange={handleChange} centered>
    <LinkTab label='Home' icon={ <HomeIcon />}  to="/" />
    <LinkTab label='Development' icon={<CodeIcon />}  to="/exchange" />

    <LinkTab label='Product Management' icon={<TimelineIcon />}  to="/pm" />
  </Tabs>
</AppBar>
  </div>
)
};

const App = () => {
  return (
    <Router>
      <div>

        <NavBar />
        <Switch>
          <Route exact path="/" component={ Coins} />
          <Route exact path="/exchange" component={ Exchanges } />
          <Route exact path="/pm" component={ Market } />
          <Redirect from="/" to="/" />
        </Switch>
      </div>
    </Router>
  );
};

export default App;