[英]Routing to a new component from react-bootstrap-table-next?
I have a table of coding problems.我有一个编码问题表。 When a user clicks on the name of the problem, I want the app to route to a page for a Problem component with props.当用户单击问题的名称时,我希望应用程序路由到带有道具的问题组件的页面。
Right now I am trying to do so by using formatter and then creating a Route with react-router-dom.现在我正在尝试通过使用格式化程序然后使用 react-router-dom 创建一个路由来做到这一点。 However, the component just opens inside of the table, instead of opening the component in its own page.但是,组件只是在表格内部打开,而不是在自己的页面中打开组件。
function nameFormatter(cell, row) {
return (
<>
<BrowserRouter>
<Switch>
<Route
path={"/problem/" + cell}
render={() => (
<Problem
id={row.id}
/>
)}/>
</Switch>
<NavLink to={"/problem/" + cell}>{cell}</NavLink>
</BrowserRouter>
</>
);
}
For a better demo, here's my sandbox: https://codesandbox.io/s/optimistic-germain-jsc06?file=/src/index.js为了获得更好的演示,这是我的沙箱: https://codesandbox.io/s/optimistic-germain-jsc06?file=/src/index.js
I may be overthinking this, and I may be tired, but any help would be appreciated.我可能想多了,我可能很累,但任何帮助将不胜感激。
Your routes are structured somewhat incorrectly.您的路线结构有些不正确。 Generally speaking, your Home
app should really be nothing but a bunch of route definitions.一般来说,您的Home
应用程序实际上应该只是一堆路由定义。 That way you create this "top level" router of sorts.这样,您就可以创建这种“顶级”路由器。 You, on the other hand, make your <BrowserRouter>
children subordinate to that table.另一方面,您使您的<BrowserRouter>
子级从属于该表。
This is how your Home
element should look:这是您的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>
);
};
So <ProblemTable />
is that table of problems and is rendered at /
and the rest of the routes are defined right below it.所以<ProblemTable />
是问题表并在/
处呈现,并且路线的 rest 定义在它的正下方。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.