使用 React 路由器 dom 處理瀏覽器后退按鈕

Question

這是我第一次來這里

我正在一個網站上工作，該網站使用 TMDB API、React、Redux 和 React Router Dom 顯示有關電影和電視節目的信息。 我想按類型和頁面對電影進行排序。 所以在我的電影頁面中，我有一個類型列表，每個類型都有一個 ID，這使得我的 useEffect() 掛鈎在每次單擊新類型或更改頁面時重新呈現。

電影頁面的鏈接類似於movies/:genreID/:pageNumber 。 所以基本上，這個想法是每次點擊一個流派或更改頁面時，url 更新，我使用 useParams() 從中獲取新的流派 ID 和 pageNumber，然后我將它們發送到調度和組件重新渲染。

我的代碼看起來像這樣

 const Movies = ({ isFrench, isOpen }) => { const dispatch = useDispatch(); const history = useHistory(); const { genreID, pageNumber } = useParams(); const language = isFrench? "fr": ""; const [genres, setGenres] = useState(genreID); const [page, setPage] = useState(pageNumber); useEffect(() => { dispatch(fetchMovies(language, page, genres)); history.push(`movies/${genres}/${page}`); }, [dispatch, language, page, genres, history]); const { popularMovies, numOfPages, isLoading } = useSelector( (state) => state.movies ); //Change Category const changeCategoryHandler = (id) => { setPage(1); setGenres(id); getCategoryName(id); }; //Print categories const frenchCategories = categoriesMoviesFR.map((category) => ( <li onClick={() => changeCategoryHandler(category.id)} id={category.id}> {category.name} </li> )); ... }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

問題是，例如，如果我在第 3 頁上，並且我按下瀏覽器的后退按鈕返回到第 2 頁，我看到瀏覽器中的鏈接發生了變化，但組件沒有更新。 流派也是如此。 如果我退出 Action for Adventure 並按 go 的返回按鈕返回 Action，我會看到鏈接更改但組件未刷新。

有沒有人遇到過這種問題？ 感謝您提供的任何幫助

Answer 1

問題在這里：

  const { genreID, pageNumber } = useParams();
  const [genres, setGenres] = useState(genreID);
  const [page, setPage] = useState(pageNumber);

您正在使用動態道具值初始化 state，但狀態的默認值永遠不會改變，因為 useState 只被調用一次。 您可以嘗試打印genreID和pageNumber以及genres & page來找出答案。

解決方案

您可以在整個Movies組件中直接使用{ genreID, pageNumber } 。 如果您確實需要將它們存儲在 state 中，請像這樣使用useEffect ：

useEffect(()=>{
  setGenres(genreID)
  setPage(pageNumber)
},[genreID, pageNumber])

我做了一個非常簡單的演示，讓你對這類問題有一個清晰的認識。

Answer 2

所以 index.js 文件看起來像這樣

 import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; import { createStore, applyMiddleware, compose } from "redux"; import { Provider } from "react-redux"; import rootReducer from "./reducers"; import thunk from "redux-thunk"; import { BrowserRouter } from "react-router-dom"; const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; const store = createStore(rootReducer, composeEnhancer(applyMiddleware(thunk))); ReactDOM.render( <BrowserRouter> <React.StrictMode> <Provider store={store}> <App /> </Provider> </React.StrictMode> </BrowserRouter>, document.getElementById("root") );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>