React Page Refresh the Whole Page after Clicking on a link

Asked
Active3 hr before
Viewed126 times

9 Answers

react
90%

The routes resolve fine, but it's refreshing the page, thereby slowing down app performance. How do I avoid re-rendering the entire page?, Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers ,First answer was correct but I didn't found Link from react-router-dom. It was in my case here:

Fix the problem by using the <Link> tag included with react-router.

import React from "react";
import { Link } from 'react-router-dom';

export class ToolTip extends React.Component {
  render() {
    return (
      <Link to="/My/Route">Click Here</Link>
    )
  }
};
load more v
88%

In React, there are two ways to refresh a page: updating the state and forcing a page reload. Let’s explore both methods of using React to refresh a page.eval(ez_write_tag([[468,60],'upmostly_com-box-3','ezslot_8',104,'0','0']));,React is a modern JavaScript library and therefore does not require a page refresh to display the latest data in the UI.,The first way of refreshing a page or component is to use vanilla JavaScript to call the reload method to tell the browser to reload the current page:

window.location.reload(false);
load more v
72%

Pretag
 Pretag team - issue, fix, solve, resolve
65%

In the above code, we are refreshing the page by clicking on a refresh button.,In this tutorial, we are going to learn about how to refresh a page or component in React with the help of examples.,In this demo, we are going to learn about how to rotate an image continuously using the css animations.

import React from "react";

function Home() {

  const refreshPage = ()=>{
     window.location.reload();  }

  return (
    <div>
      <h1>{Math.random()}</h1>
      <button onClick={refreshPage}>Refresh</button>    </div>
  );
}
load more v
75%

When you click a navigation link created by React Router <Link>, it does not refresh the whole page if you are already on the page, instead, it simply tries to update the component tied to the page. Because the data is usually loaded during the component mounting, it’s likely that you see no page update. However, in the case you really want to refresh the data, then how to do that?,Well, before we get to the solution, let’s review the React Component Life-cycle:,Basically, react-router <Link>component allows us to pass object to to , so then we can use it to decide the data refreshing. Because data refreshing in my case (using redux) triggers componentWillReceiveProps function, to prevent an infinite loop of calling data refreshing, I have to use another local state named ‘isFlushed’.

First, I changed the <Link> component from

<Link to="/">Home</Link>
load more v
40%

In short, if your app uses the same header and footer for all pages, you can ensure that only the body of your pages re-render while the header and footer remain intact.,What you've done is you've made sure that when a new route is visited, it only renders the respective page and not the header, as it seldom changes state.,Links are everywhere on the web. They are vital in locating resources such as web pages, images, and videos—not to speak of their importance in SEO. Routing helps determine which code should run when a URL is visited. In this guide, you will learn more about how routing works in React.

1<a href="https://pluralsight.com">Visit Pluralsight</a>
load more v
22%

My menu items use the <Link> component, so I'm not sure why I'm getting the reload.,My menuItem is as this:,I'm having the problem that when I click on an item of my menu, the page reloads, the bar goes correctly to the expected address, but it's just soo slow to reload the page every time.

import PropTypes from "prop-types";
import React, { Component } from "react";

import SignIn from "../Users/SignIn";
import SignUp from "../Users/SignUp";
import SignOut from "../Users/SignOut";
import "./Menu.css";
import MenuItem from "./MenuItem";

import {
  rootUrl,
  signInUrl,
  signUpUrl,
  signOutUrl
} from "../../libs/Tools";

import { slide as SlideMenu } from "react-burger-menu";

class Menu extends Component {
  constructor(props) {
    super(props);

    this.handleLinkClick = this.handleLinkClick.bind(this);
    this.handleMenuClick = this.handleMenuClick.bind(this);
    this.handleHomeClick = this.handleHomeClick.bind(this);
  }

  handleLinkClick(event) {
    this.refs.menu.hide();
    event.preventDefault();
  }
  handleMenuClick() {
    this.refs.menu.show();
  }

  handleHomeClick(event) {
    this.handleLinkClick(event);
    this.props.firstPage();
  }

  showSettings(event) {
    event.preventDefault();
  }

  render() {
    const { currentUser } = this.props;
    const items = this.getItems(currentUser);

    return (
      <SlideMenu width={"20%"}>
        {items}
      </SlideMenu>
    );
  }

  getItems(currentUser) {
    let items;
    if (currentUser.isSignedIn) {
      const { match } = this.props;
      items = [
        <span>logged in</span>,
        this.home(),
        this.signOut(match)
      ];
    } else {
      const { match } = this.props;
      items = [
        <span key="0">NOT logged in</span>,
        this.home(),
        this.signIn(match),
        this.signUp(match)
      ];
    }

    return items;
  }

  home() {
    return (
      <MenuItem to={rootUrl()} handleClick={this.handleHomeClick}>
        Inizio
      </MenuItem>
    );
  }

  signIn(match) {
    return (
      <MenuItem
        to={signInUrl(match.url)}
        path={`*/signIn`}
        component={SignIn}
        handleClick={this.handleLinkClick}
      >
        Entra
      </MenuItem>
    );
  }

  signUp(match) {
    return (
      <MenuItem
        to={signUpUrl(match.url)}
        path={`*/signUp`}
        component={SignUp}
        handleClick={this.handleLinkClick}
      >
        Registrati
      </MenuItem>
    );
  }

  signOut(match) {
    return (
      <MenuItem
        to={signOutUrl(match.url)}
        path={`*/signOut`}
        component={SignOut}
        handleClick={this.handleLinkClick}
      >
        Esci
      </MenuItem>
    );
  }

}

Menu.propTypes = {
  currentUser: PropTypes.object,
};

export default Menu;
load more v
60%

Close the browser tab or window.,Press the browser back button.,How to prompt the user when they accidentally...

window.onbeforeunload = (event) => {
   const e = event || window.event;
   // Cancel the event
   e.preventDefault();
   if (e) {
      e.returnValue = ''; // Legacy method for cross browser support
   }
   return ''; // Legacy method for cross browser support
};
load more v
48%

Method 1: Using the location.reload(): The location.reload() method reloads the current web page emulating the clicking of the refresh button on the browser. The optional true parameter passed to the method is used to force the page to load from the server and ignore the browser cache.,Method 2: Using history.go(0): The history.go() method loads a URL from the browsers history depending on the parameter passed to it. If the parameter passed is ‘0’, it reloads the current page.,How to change the background color after clicking the button in JavaScript ?

Syntax:

location.reload(true)
history.go(0);

Syntax:

location.replace(location.pathname);
load more v

Other "react-undefined" queries related to "React Page Refresh the Whole Page after Clicking on a link"