Here is the situation:
I did a kanban board using dnd-kit and I put a there a link element from React Router that when is clicked loads the entire page instead updating the element.
Already checked the following aspects:
- Routes properly configured on App.tsx file
- BrowserRouter as parent element on main.tsx file
- Link element working behaviour out of the draggable element from dnd-core works as expected, which tells me that this is maybe an onClick crash between draggable element and Link element.
The following sources were consulted but didn’t clarify anything to me:
- https://community.auth0.com/t/page-is-refreshing-every-time-a-new-route-is-clicked-react-spa/66597
–> I’m using “to” prop instead href. - https://dev.to/alexanie_/link-component-in-react-router-3e83 –> I checked that reloadDocument is not set up.
Also the Link element works fine when I comment the {…listeners} part of my code.
This are the relevant parts of my code, any help is appreciated, also if you need aditional parts of my code I will be updating this question:
Draggable.tsx file:
interface DraggableUserProps {
user: User;
}
const DraggableUser: React.FC<DraggableUserProps> = ({ user }) => {
const { attributes, listeners, setNodeRef, transform } = useDraggable({
id: user.id,
});
const style = {
transform: `translate3d(${transform?.x}px, ${transform?.y}px, 0)`,
border: "1px solid gray",
borderRadius: "5px",
padding: "10px",
margin: "5px",
backgroundColor: "white",
};
return (
<div>
<div
ref={setNodeRef}
style={style}
{...listeners}
{...attributes}
onMouseEnter={(e) => {
e.currentTarget.style.backgroundColor = "#8296a2";
e.currentTarget
.querySelectorAll("svg")
.forEach((el: any) => (el.style.color = "white"));
}}
onMouseLeave={(e) => {
e.currentTarget.style.backgroundColor = "white";
e.currentTarget.querySelectorAll("svg").forEach((el: any) => {
if (el.parentElement.className != "user-info") {
el.style.color = "green";
} else {
el.style.color = "#8296a2";
}
});
e.currentTarget.style.color = "black";
}}
>
{/* Link element that works as expected */}
<Link className="more-info" key={`useris${user.id}`} to="/user-details">
<InfoIcon style={{ color: "#8296a2" }} className="user-info" />
</Link>
<div
// onClick={(e) => e.stopPropagation()} Commented because didn't work
style={{ display: "flex", justifyContent: "space-between" }}
>
<Link
className="more-info"
key={`useris${user.id}`}
to="/user-details"
>
<InfoIcon style={{ color: "#8296a2" }} className="user-info" />
</Link>
{user.name}{" "}
<a
href={`https://wa.me/${user.phone}?text=${user.message.replace(
" ",
"%20"
)}`}
>
<WhatsApp
style={{ color: "green" }}
onMouseEnter={(e) =>
(e.currentTarget.style.transform = "scale(1.5)")
}
onMouseLeave={(e) =>
(e.currentTarget.style.transform = "scale(1)")
}
/>
</a>
</div>
</div>
</div>
);
};
export default DraggableUser;
App.tsx file:
import React from "react";
import "bootstrap/dist/css/bootstrap.css";
import { Routes, Route } from "react-router-dom";
// import Routes from "./Routes.tsx"; Ver como importar
import "./App.css";
import ResponsiveAppBar from "./components/General/ResponsiveAppBar";
import myRoutes from "./components/api/myroutes";
import ProtectedRoute from "./components/api/protectedRoute";
import UserDetails from "./components/parts/crm/UserDetails";
function App() {
return (
<>
<ResponsiveAppBar myItems={myRoutes} />
<Routes>
{myRoutes
// .filter((elmnt) => elmnt.path !== "/user-details/:id")
.map((elmnt) =>
elmnt.protected ? (
<Route
key={elmnt.path}
path={elmnt.path}
element={<ProtectedRoute element={elmnt.element} />}
/>
) : (
<Route
key={elmnt.path}
path={elmnt.path}
element={elmnt.element}
/>
)
)}
{/* <Route path="/user-details" element={<UserDetails />} /> */}
</Routes>
</>
);
}
export default App;
Main.tsx file:
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import { BrowserRouter } from "react-router-dom";
import { AuthProvider } from './components/General/AuthProvider';
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<AuthProvider>
<BrowserRouter>
<App />
</BrowserRouter>
</AuthProvider>
</React.StrictMode>
);
I would like to know if there is a way in which listeners from React Router Link element and dnd-kit useDraggable wouldn’t collide.
onClick={(e) => e.stopPropagation()}
didn’t work.
Thanks in advance guys.
