反应路由器 v5 历史推送更新 url 但没有重新渲染组件

Question

我正在使用 react-router-dom v5 的历史，这在主页上有效，在内部页面上，历史推送不起作用。

浏览器中的URL更新了，但是刷新了组件或页面

ListComponent.js

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

export const ListComponent () => {
    const history = useHistory();

    const handleClick = () => {
        history.push("/list/view-all");
    }

    return(
        <button onClick={handleClick}>View All List</button>
    );
}

ListViewAllComponent.js

import { useHistory } from "react-router-dom";
import { ListComponent } from './ListComponent';

export const ListViewAllComponent() => {
    return(
        ...
        some other html codes
        ...
        <ListComponent />
    );
}

应用程序.js

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

function App() {
return (
     <Router>
         <Switch>
             .....
             <Route exact path="/" component={ComponentName} />
             ....
         </Switch>
     </Router>

Answer 1

history.push() 必须写在 function 中。

useEffect(() => {
  history.push("/name");
}, [])

或者你可以使用<Redirect to = "/" />组件