Meteor React Router Page Reload Problem

#meteor #meteorreact #react #javascript

Sometimes when you click on a Link in Meteor with react-router-dom, the page fully reloads to navigate between pages rather than partially or dynamically reloading.

To solve this issue, use this customized Link component instead of the original:

import React from "react";
import { useHistory } from "react-router-dom";

export const Link = ({ children, to, className }) => {
    const history = useHistory();

    const handleMouse = (e) => {
        e.target.href = "";
    };

    const handleClick = (e) => {
        e.preventDefault();
        history.push(to);
        e.target.href = to;
    };

    return (
        <a
            className={className}
            href={to}
            onClick={handleClick}
            onMouseDown={handleMouse}
        >
            {children}
        </a>
    );
};