路由组件渲染两次

Question

单击 AddPet 后，我​​的 AddPet 组件呈现两次。 有人可以帮助我解决这个问题吗。

而且 AddPet 中的子组件也会在单击 AddPet 按钮后呈现。

export default class Pets extends React.Component {
   render () {
    return (
        <HashRouter>
            <div>
            <header className ="nav-hedaer">
                <ui className = "nav-header-ui-1 g-auto">
                    <li>Register</li>
                    <li>Login</li>  
                    <li>
                        <NavLink to ="/addpet">AddPet</NavLink>
                    </li>                    
                </ui>
                <ui className = "nav-header-ui-1">
                    <li>Aboutus</li>              
                    <li>Contactus</li>
                    <li>Advertising with Us</li>
                    <li>Privacy</li>                    
                </ui>
            </header>
            <div className="content">
                <Route path="/addpet" component={AddPet}/>
            </div>
            </div>  
        </HashRouter>         
    )
    }
}