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

Question

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

现在我正在尝试通过使用格式化程序然后使用 react-router-dom 创建一个路由来做到这一点。但是，组件只是在 table 内部打开，而不是在其自己的页面中打开组件。

  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> children 从属于那个 table。

您的 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 /> 是 table 的问题并在 / 处呈现，其余路由在其正下方定义。

这里有一份 Sandbox 给你。

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

Routing to a new component from react-bootstrap-table-next?

javascript

reactjs

react-bootstrap-table

react-router-dom