react-router-dom@5.x点击路由变化，组件不显示，需要手动刷新才显示的问题。

1. react-router-dom点击路由变化，组件不显示，需要手动刷新才显示的问题？

原因可能是有多层Router导致的，context覆盖了。

2. 如果报history undefined，无法push的问题？

原因是组件不在Router里面，react-router-dom的context，不是子元素是的拿不到context，所以要把组件放到Router里面才可以。

譬如例子：

import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

要把HomeButton组件放到Router中

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
<Router>
    <Switch>
        <Route path="/home">
          <HomeButton />
        </Route>
    </Switch>
</Router>

3. 所以最好是包裹一下APP,或在App.tsx里面把Router写到最外层

import React from "react";
import ReactDOM from "react-dom/client";


import { BrowserRouter as Router } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
      <Router >
        <App />
      </Router>
  </React.StrictMode>
);