在React中导航到新页面时,如何强制卸载组件?

我有一个主页,上面有指向表单的链接,如下所示:

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Route,
  NavLink,
  Redirect,
  Switch,
  withRouter
} from "react-router-dom"; 
import addHand from './Forms/addHand'

export class Home extends Component { 

  render() { 
      return ( 
        <div> 
          <Router> 
          <div>
          <NavLink to= '/hands/new'> Add a new hand </NavLink> 
          <Route path= '/hands/new' component={addHand}/> 
          <h4> Search For Hands By Category </h4> 
          <h4> Search For Sessions By Category </h4> 
          <h4> Search For Tables By Category </h4> 
          </div> 
          </Router>
        </div> 
      ); 
  }
} 

export default Home; 

我还有一个导航栏,上面有从任何页面返回的链接,如:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom';  
import unmountComponentAtNode from 'react-dom';

class NavBar extends Component { 

  render() {
    return (
      <div className="navbar"> 
        <NavLink className="link"
        to="/"
        exact 
      >Home</NavLink> 
      </div>
    ); 
  }
};

export default NavBar; 

如果我转到表单,然后改变主意,决定回到主页,当我按下导航链接时,URL会改变,但是表单仍然呈现在主页上。我可以在路由之间来回切换,但是让表单从DOM卸载的唯一方法是刷新页面。是什么导致了这种行为,我该怎么做才能解决它?我以前在React中遇到过类似的问题,但从未找到解决方案。谢谢!

编辑**我尝试将此添加到导航链接:

render() {

const refCallback = node => {
  unmountComponentAtNode(node)
}

return (
  <div className="navbar"> 
    <NavLink className="link"
    to="/"
    exact 
    innerRef={refCallback}
  >Home</NavLink> 
  </div>
); 
}
}; 

根据React Router文档,但它给出了以下错误:

unmountcomponentNode(…):目标容器不是DOM元素。

这是app.js中的代码

import React, { Component } from 'react';
import './App.css'; 
import { Router, Route } from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';
import Home from './Components/Home'
import Navbar from './Components/Navbar';
import addHand from './Components/Forms/addHand';

export const history = createBrowserHistory();

class App extends Component {
  render() {
    return (
     <div className="App">
        <header className="App-header">
          <h1 className="App-title-top">Hi Adam, welcome to your Personal 
Poker Universe!</h1> 
          <h1 className="App-title-middle">Not Adam? GTFO!</h1> 
          <h1 className="App-title-bottom">Just Kidding, you can stay</h1>
        </header> 
        <Router history= {history}> 
          <div>
        <Navbar/> 
        <Route exact path='/' component= {Home} />   
        </div>
        </Router>
      </div>
    );
  }
}

export default App;