Link inside Cell causes page refresh
See original GitHub issueI’m not being rude or anything, and I definitely understand everybody has work to do and it is difficult to spend time on issues. But my question, which in my opinion is valid, on the spectrum forum, which was over a month ago, didn’t receive a single comment (I deleted my account after that). And I can’t find a better way to solve that without opening an issue here.
I’ve posted the question again here. And I will post it here as well.
A Link (from react-router-dom) inside a Cell causes the entire page to refresh. But the same link outside the react-table
works just as it is supposed to (no refresh). My react-table
has no special configuration; just has custom styling. The snippet I used is from one of the issues, which goes like this:
...,
Cell: ({ row }) => (
<Link to={{ pathname: `/dashboard/list/${row.id}` }}>{row.id}</Link>
),
...
The link is clickable and goes to the right component. But it causes a refresh. Is this expected behavior or am I going wrong somewhere?
Other useful info:
"react-table": "^6.9.2",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"react-scripts": "^2.1.8",
"react-router-dom": "^4.4.0",
Issue Analytics
- State:
- Created 4 years ago
- Comments:9
Glad we got it figured out!
I have a side menu that will close when I clicked any area of the document ( adding addEventListener to the document). now I face a problem with clicking the value of the cell, the onClick is not working with the Cell (custom rendering), even when I use getProps or getTdProps, I tried e.stopPropagation() and e.nativeEvent.stopImmediatePropagation(), unfortunately it was unsuccessful. in the normal rendering of the column when I clicked the value of cell the onClick event is triggering but when I use custom cell rendering (using Cell ) the onClick event is not triggering.