如何使用react-router-hash-link链接到同一页面上的其他组件？

Question

我一直在尝试使用React-Router-Hash-Link从导航栏上的按钮链接到其他组件。例如，我想将导航栏中的about按钮链接（滚动到）页面的about组件。这是我当前文件的样子。

Navbar.js

class navbar extends React.Component {
    render() {const { root, grow, button, bar, link } = this.props.classes;
    return (
        <div className={root}>
            <AppBar position="static" className={bar}>
                <Toolbar>
                    <h2 className={grow}><NavLink to='/' className= 
                   {link}>Shirley</NavLink></h2>
                    <Button color="inherit" className={button}
                    >About</Button>
                    <Button color="inherit" className={button}>Projects</Button>
                </Toolbar>
            </AppBar>
        </div>
    );
}

Home.js

export default class Home extends Component {
    render() {
        return (
            <div>
                <Navbar />
               <About/>

            </div>
    )
}
}

App.js

import { BrowserRouter, Route, Switch } from 'react-router-dom';
class App extends Component {
render() {
    return (
    <BrowserRouter>
       <Switch>
            <Route path="/" exact component={Home} />
       </Switch>
  </BrowserRouter>);
 }
 }

我对HashLinks或React没有太多经验，只是以为我尝试了一些新东西。谢谢！