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

Question

I am using history from react-router-dom v5 this works on home page, on the inside pages the history push does not work.

The URL in the browser is update, but the component or page is refreshed

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 />
    );
}

app.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 () must be written in a function.

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

Or you can use the <Redirect to = "/" /> component