时间戳

首页 > 解决方案 > 从 react-bootstrap-table-next 路由到新组件？

javascript - 从 react-bootstrap-table-next 路由到新组件？

问题描述

我有一个编码问题表。当用户单击问题的名称时，我希望应用程序路由到带有道具的问题组件的页面。

现在我正在尝试通过使用格式化程序然后使用 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

我可能想多了，我可能很累，但任何帮助将不胜感激。

标签： javascriptreactjsreact-router-domreact-bootstrap-table

解决方案

您的路线结构有些不正确。一般来说，您的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 />问题表也是如此，并在其下方呈现，/其余路线在其下方定义。

这是一个沙盒给你。

推荐阅读