React 路由器不刷新页面

Question

我有两条不同的路线使用相同的组件。


    <BrowserRouter>
      <Routes>  
        <Route path="/produktai" element={<Products />}/>
        <Route path="/produktai/:productId" element={<Products />} />
      </Routes>
    </BrowserRouter>

我正在使用 Link 来自 React 在页面之间切换并从

获取 ID


    const pathname = useLocation().pathname;

休息 api。

例如，当我使用 Link 将页面从 /products 更改为 /products/2 时，url 发生了变化，但问题是页面没有按预期刷新。如果我使用带有 href 的标签，问题就解决了，因为它总是重新加载页面，这与平滑反应 Link 功能不同，但我认为这不是一个好的解决方案。

Answer 1

即使路由路径发生变化，您仍在渲染相同的 Products 组件。如果您需要在路径更改时运行一些逻辑，或者更有可能在 productId 路由参数更新时，那么您应该使用 useEffect 钩子与 productId 路由作为依赖项的参数。

示例：

const { productId } = useParams();

useEffect(() => {
  if (productId) {
    // Perform rest api call and response handling
  }
}, [productId]);

React 路由器不刷新页面

React router doesn't refresh page

rest

reactjs

react-router

react-native

axios