[英]React HashRouter - clicking links updates URL in browser but doesn't change page if link leads to page on same level
I have a website with a simple structure:我有一个结构简单的网站:
root
branch
leaf A
leaf B
The routing is manage by HashRouter.路由由 HashRouter 管理。
<Link>
s from branch -> leaf work fine, but from leaf -> leaf don't. <Link>
来自分支 -> 叶子的工作正常,但来自叶子 -> 叶子却不行。
If I create a <Link>
to leaf B on leaf A, then clicking it will update the URL in the browser and history, but the page won't update.如果我在叶子 A 上创建一个
<Link>
到叶子 B,然后单击它将更新浏览器和历史记录中的 URL,但页面不会更新。 Refreshing or opening in a new tab will cause the correct page to load though.刷新或在新选项卡中打开将导致正确的页面加载。
Here is the route I'm trying to follow, which works perfectly when the link is from a branch page: <Route exact path="/branch/:leaf" component={Leaf} />
这是我试图遵循的路线,当链接来自分支页面时,它可以完美运行:
<Route exact path="/branch/:leaf" component={Leaf} />
When I create a link from one leaf page to another though, it doesn't work: <Link to={'/branch/' + name}>{name}</Link>
但是,当我创建从一个叶子页面到另一个页面的链接时,它不起作用:
<Link to={'/branch/' + name}>{name}</Link>
Any ideas what's going on here?有什么想法吗? Is HashRouter unable to link to a page on the same level of the route tree?
HashRouter 是否无法链接到同一级别的路由树的页面?
if you do something like this and you go to the path with the component isn't re-rendered.如果你做这样的事情并且你 go 到带有组件的路径不会重新渲染。 you have to listen on the params change if you want something to change.
如果您想更改某些内容,则必须听取参数更改。
may you post your leaf
component to check where the error is?您可以发布您的
leaf
组件以检查错误在哪里吗?
the ugly fix would be something like this:丑陋的修复将是这样的:
<Route exact path="/branch/:leaf" component={(props) => <Leaf {...props} key={window.location.pathname}/>}/>
Okay, I found a fix for this.好的,我找到了解决此问题的方法。 And since I've searched for answers to other questions only to find a resolved thread that's years ago in which the OP (a deleted account, of course) just says 'nevermind, I figured it out', I'm writing it here.
而且由于我已经搜索了其他问题的答案,只是找到了多年前的已解决线程,其中 OP(当然是已删除的帐户)只是说“没关系,我想通了”,所以我在这里写它。
The issue is with the fact that the leaf pages are all the same component, just with different props.问题在于叶子页面都是相同的组件,只是具有不同的道具。 When you click the link, the page updates but the component isn't redrawn.
单击链接时,页面会更新,但不会重绘组件。 You have to tell React to redraw the component.
你必须告诉 React 重绘组件。 The best way of doing this would be to change the props values on update and setState().
最好的方法是更改 update 和 setState() 上的 props 值。 The lazy way (which works just fine for my use case) is to force a reload whenever the component is updated in any way.
懒惰的方式(对我的用例来说很好用)是在组件以任何方式更新时强制重新加载。 I did this by putting the following code method the leaf class:
我通过将以下代码方法放入叶子 class 来做到这一点:
componentDidUpdate() {
window.location.reload()
}
Again, this isn't the prettiest fix.同样,这不是最漂亮的修复。 It works just fine for now though.
不过现在它工作得很好。 Later on I will likely update the component properly and edit this post to reflect that.
稍后我可能会正确更新组件并编辑这篇文章以反映这一点。 In the meantime hopefully this helps someone.
同时希望这可以帮助某人。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.