使用 React-Router 在同一頁面上的組件之間導航

Question

我正在處理待辦事項列表，其中我們有一個包含項目列表的主頁，所有對它們的操作（創建、編輯、查看）都是通過模態 windows 進行的，現在我需要添加一些“路由”這些模態 windows （例如，用戶將一些特定的 URL 插入瀏覽器的地址欄中，應用程序應顯示為打開的模態窗口）

我正在考慮將 hash 添加到 URL，例如對於創建它應該是“#create-task”，然后像這樣處理 Z0800FC577294C34E0B28AD2839435945Effect 更改

  useEffect(() => {
    if (location.hash === 'create-task') {
      openCreateTaskModal();
    } else if (location.hash === 'view-task') {
      openViewTaskModal(id); // "id" also should be parsed from URL
    }
  }, [location.hash])

您如何看待這個解決方案，也許有更好的方法來實現這個？

Answer 1

我認為，最佳實踐。

 import { Route } from "react-router"; ... return ( <div> <Route path="/create"> <CreateComponent /> </Route> <Route path="/view/:id"> <ViewComponent /> </Route> </div> );