How to refresh a Page using react-route Link

Question

I am trying to refresh a page using react-route Link. But the way I have implemented it goes to the URL one step back.(as an example if the URL was ../client/home/register and when I press the reload is goes to ../client/home)

below is my code

const AppErrorPage = () => (
    <div>
    <div style={ styles.container }>
        <h2>Error</h2>
        <p> Something went wrong, please reload the page </p>
        <div>
         <Link to="" refresh="true">
            <span>Reload</span>
          </Link>
        </div>
    </div>
    </div>  
);

@JyothiBabuAraja looking at the example, it looks like an error happens so prompting the user to reload isn't a bad idea. — aug
– aug, Commented Apr 17, 2018 at 20:31
@aug I don't think so. Instead of letting user in an error state, asking him for fresh start is fine. But ideally we should overcome such situations without user intervention. — Jyothi Babu Araja
– Jyothi Babu Araja, Commented Apr 18, 2018 at 7:01

Lukas Liesis · Accepted Answer · 2017-01-05 09:43:43Z

275

To refresh page you don't need react-router, simple js:

window.location.reload();

To re-render view in React component, you can just fire update with props/state.

answered Jan 5, 2017 at 9:43

Lukas Liesis

26.6k12 gold badges123 silver badges123 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Anna Over a year ago

I actually refactored to use it as a button but now i get an error "Expected onClick listener to be a function, instead got type string"

Anna Over a year ago

<button type="button" onClick="refreshPage()">             <span>Reload</span>           </button>    function refreshPage(){      window.parent.location = window.parent.location.href; }

Lukas Liesis Over a year ago

You have entered onClick value as string, use this: onClick={refreshPage} or onClick={() => refreshPage()}

Jyothi Babu Araja · Accepted Answer · 2017-01-05 10:16:25Z

45

Try like this.

You must give a function as value to onClick()

You button:

<button type="button" onClick={ refreshPage }> <span>Reload</span> </button>

refreshPage function:

function refreshPage(){ 
    window.location.reload(); 
}

edited Jan 5, 2017 at 10:16

answered Jan 5, 2017 at 10:08

Jyothi Babu Araja

10.3k3 gold badges33 silver badges41 bronze badges

2 Comments

Lukas Liesis Over a year ago

this is wrong, because function will be called during render. Check comments under my answer

Jyothi Babu Araja Over a year ago

@LukasLiesis Thank you Just overlooked. Updated it

Gaurav Kumar · Accepted Answer · 2022-04-09 08:48:45Z

16

You can simply run this after successful query.

window.location.reload();

answered Apr 9, 2022 at 8:48

Gaurav Kumar

1911 silver badge3 bronze badges

1 Comment

James Kane Over a year ago

I would not recomended it if you want to preserve some state or have some logic based on that. You will lose it. Speaking in react context.

sigmapi13 · Accepted Answer · 2021-02-11 12:34:41Z

9

I ended up keeping Link and adding the reload to the Link's onClick event with a timeout like this:

function refreshPage() {
    setTimeout(()=>{
        window.location.reload(false);
    }, 500);
    console.log('page to reload')
}

<Link to={{pathname:"/"}} onClick={refreshPage}>Home</Link>

without the timeout, the refresh function would run first

answered Feb 11, 2021 at 12:34

sigmapi13

2,5933 gold badges31 silver badges29 bronze badges

2 Comments

Maryam Alishahi Over a year ago

window.location.reload() is sufficient,for me the page didn't reload when tried window.location.reload(false)

Prakash Raj Over a year ago

this one worked as expected for my requirement

Ferdousi · Accepted Answer · 2020-10-14 17:15:38Z

6

You can use this

<a onClick={() => {window.location.href="/something"}}>Something</a>

answered Oct 14, 2020 at 17:15

Ferdousi

3396 silver badges20 bronze badges

Comments

David Barrows · Accepted Answer · 2021-10-02 06:29:36Z

1

Here's one way of doing it using React Bootstrap and a component that you can then drop into any page...

import Button from 'react-bootstrap/Button';

export const RefreshCurrentPage = () => {

  function refreshPage(){ 
    window.location.reload(); 
  }

  return (
    <div className="row">
      <Button onClick={ refreshPage } variant="secondary" size="sm" className="btn ml-4">Refresh Page</Button>
    </div>

  );

}

answered Oct 2, 2021 at 6:29

David Barrows

7788 silver badges20 bronze badges

Comments

Saad5400 · Accepted Answer · 2023-07-25 04:11:34Z

My problem with window.location.reload(); is that it does not use client-side rendering. My solution was to do something like this:

// Empty.js
export default function Empty() {
    return (<></>);
}

// App.js
<Route path="refresh" element={<Empty />} />

// CustomLink.js
import { Link, useLocation, useNavigate } from "react-router-dom";

export default function CustomLink(props) {

    const location = useLocation();
    const navigate = useNavigate();

    return (
        <>
            <Link to={props.to} className={props.className} onClick={e => {
                e.preventDefault();
                if (location.pathname === props.to) {
                    navigate('refresh');
                    setTimeout(() => {
                        navigate(props.to);
                    }, 100);
                }
                else {
                    navigate(props.to);
                }
            }}>
                {props.children}
            </Link>
        </>
    );
}

Collectives™ on Stack Overflow

How to refresh a Page using react-route Link

7 Answers 7

3 Comments

2 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

2 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related