從 react-bootstrap-table-next 路由到新組件？

Question

我有一個編碼問題表。 當用戶單擊問題的名稱時，我希望應用程序路由到帶有道具的問題組件的頁面。

現在我正在嘗試通過使用格式化程序然后使用 react-router-dom 創建一個路由來做到這一點。 但是，組件只是在表格內部打開，而不是在自己的頁面中打開組件。

  function nameFormatter(cell, row) {
    return (
      <>
        <BrowserRouter>
          <Switch>
            <Route
              path={"/problem/" + cell}
              render={() => (
                <Problem
                  id={row.id}
                />
              )}/>
          </Switch>
          <NavLink to={"/problem/" + cell}>{cell}</NavLink>
        </BrowserRouter>
      </>
    );
  }

為了獲得更好的演示，這是我的沙箱： https://codesandbox.io/s/optimistic-germain-jsc06?file=/src/index.js

我可能想多了，我可能很累，但任何幫助將不勝感激。

Answer 1

您的路線結構有些不正確。 一般來說，您的Home應用程序實際上應該只是一堆路由定義。 這樣，您就可以創建這種“頂級”路由器。 另一方面，您使您的<BrowserRouter>子級從屬於該表。

這是您的Home元素的外觀：

const Home = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path={"/"}>
          <ProblemTable />
        </Route>

        {problems.map((item) => (
          <Route
            key={item.id}
            path={"/problem/" + item.name}
            render={() => <Problem id={item.id} />}
          />
        ))}
      </Switch>
    </BrowserRouter>
  );
};

所以<ProblemTable />是問題表並在/處呈現，並且路線的 rest 定義在它的正下方。

這是一個 沙盒給你。