React - Url 正在更新但组件未重新渲染

Question

我正在使用 react-router-dom 进行路由，问题是 url 在单击导航栏元素时发生变化，但属于其他页面的组件未重新呈现。这是我的代码：

App.js:

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import Header from './common/Header';
import Footer from './common/Footer';
import MainPage from './layout/MainPage';
import GiftWrapping from './layout/GiftWrapping';
import Contact from './layout/Contact';
import Catalog from './layout/Catalog';

function App() {
  return (
    <div className="App">
      <Router>
        <Header />
        <Switch>
          <Route path="/home" component={MainPage} />
          <Route path="/catalog" component={Catalog} />
          <Route path="/giftwrapping" component={GiftWrapping} />
          <Route path="/contact" component={Contact} />
        </Switch>
        <Footer />
      </Router>
    </div>  
  );
}

export default App;

Header.js:

<nav className="Header-bottom">
  <div className="container clearfix">
    <Router>
    <div className="Left-nav">
      <ul>
        <li>
          <Link to={"/home"} className="active-nav-element">Main Page</Link>
        </li>
        <li>
          <Link to={"/catalog"}>Catalog</Link>
        </li>
        <li>
          <Link to={"/contact"}>Contact</Link>
        </li>
        <li>
          <Link to={"/giftwrapping"}>Gift Wrapping</Link>
        </li>
        <li>
          <Link to={"/catalog"} className="dropdown-toggle">Catalog</Link>
        </li>
      </ul>
    </div>
    </Router>
  </div>
</nav>

Answer 1

import React from "react";
import { Link, withRouter } from "react-router-dom";

function Header() {
  return (
    <nav className="Header-bottom">
      <div className="container clearfix">
        <div className="Left-nav">
          <ul>
            <li>
              <Link to={"/home"} className="active-nav-element">
                Main Page
              </Link>
            </li>
            <li>
              <Link to={"/catalog"}>Catalog</Link>
            </li>
            <li>
              <Link to={"/contact"}>Contact</Link>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
}

export default withRouter(Header);

请使用 withrouter 方法，而不是在 <header /> 中添加单独的 <Router>。 Codesandbox reference

React - Url 正在更新但组件未重新渲染

React - Url is updating but component is not rerendering

reactjs

react-router

react-router-v4

react-router-dom