reactjs 如何 go 到嵌套路由中的父路由

Question

假設我直接從瀏覽器訪問 URL

http://localhost:3000/developerList/developer/2

我將在頁面上有一個返回按鈕，應該 go 回到父路由，到

http://localhost:3000/developerList/

我怎樣才能做到這一點？ 我無法使用

history.goBack()

因為這會觸發瀏覽器返回行為，這實際上可以追溯到 google.com （假設那是我來自的地方）

我也不能用

history.push('/developerList') 

因為那不是動態的。

我知道這是可以做到的，來自 angular 背景，你可以做 $state.go('^'); 它知道刪除當前路由 /developer/2 （是的，甚至 /2 部分）。

任何機會都可以通過庫做出反應，或者我必須寫一些東西。 對於我的生活，我無法弄清楚。

這是我的路由結構：

應用程序.js

export class App extends React.Component {
  render() {
    return (
      <Router>
        <Route path='/developerList'>
          <DeveloperListPage></DeveloperListPage>
        </Route>
      </Router>
        );
    }
}

DeveloperListPage.js

export class DeveloperListPage extends React.Component {
  render() {
    return (
      <div className="developer-list-page">
        <Route path='/developerList/developer/:id'>
          <DeveloperPage></DeveloperPage>
        </Route>
      </div>
    )
  }
}

現在在 DeveloperPage 我希望有一個 go 后退功能

Answer 1

在DeveloperListPage頁面/組件級別，您可以使用當前路由匹配來獲取匹配的路徑以呈現它。 創建一個gotoParent回調 function ，它使用history.push來“返回”到這個父組件。

示例代碼：

應用程序

function App() {
  return (
    <div className="App">
      <Router>
        <ul>
          <li>
            <Link to="/">/home</Link>
          </li>
          <li>
            <Link to="/developerList">/developerList</Link>
          </li>
        </ul>
        <Route path="/developerList">
          <DeveloperListPage />
        </Route>
      </Router>
    </div>
  );
}

開發者列表頁面

const DeveloperListPage = () => {
  const history = useHistory();
  const { path } = useRouteMatch(); // get matched path

  const gotoParent = () => history.push(path); // go to this path

  return (
    <div className="developer-list-page">
      <ul>
          <li>
            <Link
              to={`/developerList/developer/${Math.floor(
                Math.random() * 1000
              )}`}
            >
              /developerList/developer/:id
            </Link>
          </li>
        </ul>
      <Route path="/developerList/developer/:id">
        <DeveloperPage gotoParent={gotoParent} /> // <-- pass callback
      </Route>
    </div>
  );
};

開發者頁面

const DeveloperPage = ({ gotoParent }) => { // <-- destructure callback
  const history = useHistory();
  const { id } = useParams();
  return (
    <div>
      Developer Page: {id}
      <div>
        <button onClick={gotoParent} type="button"> // <-- attach callback
          Go to parent
        </button>
        <button onClick={history.goBack} type="button">
          Go Back
        </button>
      </div>
    </div>
  );
};

演示

初始 URL： "/developerList/developer/174"

• 嘗試“返回”按鈕
• 嘗試“轉到父級”按鈕並查看差異

注意：如果您不想顯式地將“gotoParent”回調傳遞給子路由，您可以輕松地將其抽象到 React 上下文中以提供“最近的”父組件以跳轉到。