反應路由器 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 = "/" />組件