React router v5 history push updates url but no rerender of component

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