重新渲染NextJS路由（React组件）

Question

我有一个页面（文件名为<div class="header"> <img src="http://dummyimage.com/80&text=logo.png"> <h1>Memory Monsters</h1> <p id="replay"><!-- button will show up here --></p> </div> <div class="card" data-card="1" onclick="cardClicked(this)"> <img src="http://dummyimage.com/80&text=1.png"> <img class="back" src="http://dummyimage.com/80&text=back.png"> </div> <div class="card" data-card="7" onclick="cardClicked(this)"> <img src="http://dummyimage.com/80&text=7.png"> <img class="back" src="http://dummyimage.com/80&text=back.png"> </div> <div class="card" data-card="1" onclick="cardClicked(this)"> <img src="http://dummyimage.com/80&text=1.png"> <img class="back" src="http://dummyimage.com/80&text=back.png"> </div> <div class="card" data-card="7" onclick="cardClicked(this)"> <img src="http://dummyimage.com/80&text=7.png"> <img class="back" src="http://dummyimage.com/80&text=back.png"> </div> <div class="card" data-card="5" onclick="cardClicked(this)"> <img src="http://dummyimage.com/80&text=5.png"> <img class="back" src="http://dummyimage.com/80&text=back.png"> </div> <div class="card" data-card="5" onclick="cardClicked(this)"> <img src="http://dummyimage.com/80&text=5.png"> <img class="back" src="http://dummyimage.com/80&text=back.png"> </div>），如下所示：

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};
if (!firebase.app.lenght) {
  firebase.initializeApp(firebaseConfig);
}

在/home组件中，我有：

class Index extends React.Component {

    render() {

        return (
            <React.Fragment>
               <Navbar />
               <Banner />
               <Footer />
            </React.Fragment>
        );
    }
}

export default Index;

Navbar是以下组件：

<Link activeClassName="active" href="/home">

当我单击它时，Link路径中的组件不会重新呈现。 我该如何强制重新渲染？