Question

关于此的信息有点稀疏，过时或完全盘绕。

是否没有简单的方法来告诉react <Link>或<NavLink>元素位于同一页面上，但是需要重新加载它指向的组件？

我了解如何简单地更改属性，从而导致页面重新呈现。

问题是，我要处理的链接是Navbar组件的一部分，因此它们与实际需要处理的组件是分开的。下面的代码段：

<li>
    <NavLink to={'/page/1'} >
       Page 1
    </NavLink>
</li>
<li>
    <NavLink to={'/page/2'} >
       Page 2
    </NavLink>
</li>
<li>
    <NavLink to={'/page/3'} >
        Page 3
    </NavLink>
</li>

在routes.tsx中，我有：

<Route path='/page/:id' component={Page} />

此功能适用于其中一个链接的首次单击，但是以后的任何尝试均无效。我知道为什么它不起作用，但是真的不知道如何解决它。

确定要重新呈现特定组件的页面并不难吗？

我在路由文件中发现了一个建议告诉我尝试一下：

<Route exact path='/page/:id' component={(props) => <Page {...props} /> }/>

这在Visual Studio中没有显示任何错误，但是测试网站可以使我做到这一点：

ERROR in [at-loader] ./ClientApp/routes.tsx:18:101 
TS2322: Type '{ children?: ReactNode; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<ViewPortfolioProject> & Readonly<{ children?: Reac...'.
Type '{ children?: ReactNode; }' is not assignable to type 'Readonly<RouteComponentProps<{}>>'.
Property 'match' is missing in type '{ children?: ReactNode; }'.

那是我所能得到的。

最初，我使用的是标准的<a href="/page/1">标签，但是在转到我想要的位置之前会导致整个网站的完全刷新，这并不是一种真正的“反应”方式。

感谢所有输入，谢谢。

Answer 1

您可以为组件分配密钥，更新状态或使用新密钥调用forceUpdate（）触发重新渲染。

反应链接到相同的组件

1 个答案: