DEV Community

Rabist
Rabist

Posted on

1 1

Meteor React Router Page Reload Problem

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>
    );
};
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay