"Link" from "react-router-dom" inside "extra" in antd 卡不工作

Question

我有一个这样的内容组件：

<Content style={{ maxWidth: "99%" }}>
      <Switch>
        <Route path="/home">
          <Home />
        </Route>
        <Route path="/products/:id">
          <p>apsokfopaskdfop</p>
        </Route>
        <Route exact path="/products">
          <ProductList />
        </Route>
      </Switch>
    </Content>

我的产品列表

export const ProductList = () => {
  const [items, setItems] = useState([]);
  return (
     {items && (
          items.map(item => {
            return <ProductCard
              id={item.id}
              name={item.name}/>
          })
)}

我有一张这样的 ProductCard：

export const ProductCard = ({ id, name }) => {
  return (
        <Card
          title={name}
          hoverable
          extra={<Link to={`/products/${id}`} >More information</Link>}
          style={{ height: 240 }}
        />
)}

extra 属性中的 Link 不起作用。当我单击 More information 时，路径发生变化，因此我的 url 变为 http://localhost:3000/products/1 但内容保持不变，我的 switch 中的 p 标签没有如果我尝试更改为 <Link to="/home" />，t 也不会出现在屏幕上。但是如果我用 F5 重新加载我的页面，内容就会改变。有帮助吗？

编辑：

App.jsx

return (
      <Router>
         <MenuComponent />
         <ContentComponent />
         <Footer />
      </Router>
)}

ContentComponent.jsx

export const ContentComponent = () => {
return (

   <Content style={{ maxWidth: "99%" }}>
      <Switch>
        <Route path="/home">
          <Home />
        </Route>
        <Route path="/products/:id">
          <p>apsokfopaskdfop</p>
        </Route>
        <Route exact path="/products">
          <ProductList />
        </Route>
      </Switch>
    </Content>
)}

Answer 1

找到您的问题，与您的 context.jsx 文件有关。仅从您的代码沙箱中找到它，因此感谢您提供它。

您正在使用 BrowerRouter，它是为路由器（您正在使用的）设计的。路由是一个单独的组件。

import { BrowserRouter as Route, Switch } from "react-router-dom";

但应该是

import { Route, Switch } from "react-router-dom";

"Link" from "react-router-dom" inside "extra" in antd 卡不工作

"Link" from "react-router-dom" inside "extra" in antd card not working

javascript

reactjs

antd