Comments (9)
Found out that this can be solved by adding the key prop to the Route component.
props.key = this.state.selfPathname
before React.createElement(...)
There is no way to pass a unique key depending on the route currently (from the outside)
from react-keeper.
@reneeichhorn
If there is a 'cache' property on your Route component? If so, the Detail page will be cached instead of unmounted when url is not matching.
from react-keeper.
It has one, I'm just using the example given in the repository
@vifird
from react-keeper.
The main issue is that without the key prop react won't understand what is a new component and what not. Therefore it will just think every route is just the same component. Even when going into a new route.
from react-keeper.
Yeah, key property is used as ID of a component.
@reneeichhorn
from react-keeper.
I will give you an example:
Imagine a /product/:id route that uses the Product component. The product component uses componentDidMount to recieve data from the server. (as suggested by react best practices)
Now I navigate to /product/123. Product component is mounted, data for product with id 123 is fetched. Product component get rendered again after retrieving data.
Next I navigate to /product/456. Here is where the issue starts (the following problem appear WITH cache and also WITHOUT cache). The Product component is just rerendered with different props. componentDidMount is not executed again and therefore no new data is retrieved. Product will still display data for the 123 product because new data was not fetched.
With or without caching this should not happen. Without a proper key prop on the Route for React it will look like the same component just with different props, therefore only mounted once. This completely breaks React. And forces us to write workarounds.
from react-keeper.
@reneeichhorn
Yeah, thanks for your issue. We are repairing this problem.
from react-keeper.
Good one: next version 3
from react-keeper.
也遇到了同样的问题,什么时候发布新版本啊?????
from react-keeper.
Related Issues (20)
- leaveFilter无法阻止页面跳转? HOT 3
- 页面默认打开是http://localhost:3000/#/,怎么设置能够使链接为http://localhost:3000呢 HOT 2
- 与matomo整合的问题 HOT 1
- 急!急!急!关于Control.go的问题 HOT 5
- 如何通过path返回指定页面
- react-keeper是否支持react-hook HOT 4
- 几点疑惑 HOT 12
- 为什么我用Route渲染通过react-redux中connect方法产生的组件就报错? HOT 3
- RouteMapping 为什么不直接使用正则表达式做参数,而要使用一个新的规则? HOT 1
- dva 使用react-keeper 在ios与安卓中的不同表现, HOT 1
- react-keeper与mobx-react-router HOT 2
- 你们是怎么设置热更新的从 react-router-dom换过来之后热更新不起效了 HOT 3
- Route里不能嵌套Route? HOT 1
- 可以集成进umi吗? HOT 1
- 可以给一个中文的文档么?
- 从列表页跳转到详情后再回到列表页后 没有缓存住滚动条,直接返回顶部,怎么回到跳转时的滚动条位置 HOT 1
- react-keeper中如何使用Switch HOT 1
- 貌似不支持react17.0.2?亦或者vite?
- 用webpack 打包编译后在chrome 的Elements 中发现Link 变成了href="javascript:void(0)"。导致右键link 打开的页面被浏览器blank#blocked
- 使用recoil后 URL地址有变,但界面组件没换
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-keeper.