React Router | load component only on page refresh

Question

I'm using React Router v4 Browser Router. My scenario is I have call login page on every page refresh (Browser Refresh click or F5)

Route

 <Router history={history}>
        <div>
          <Spin spinning={this.props.isloading}>
            <Switch>
              <Route path="/login" component={Login} />
              <Route path="/Dashboard" component={Dashboard} />
              <Route path='*' component={NotFound} />
            </Switch>
          </Spin>
        </div>
      </Router>

I need to load login component on page refresh so I need something like below

<Refresh path="/login" component={Login} />

I think I answered your question; however, I honestly can't understand why you'd ever want to detect if the user refreshes the page. If I reloaded a page and the page displayed something differently, not because there's an update, but because I clicked refresh, I feel like that behavior diminishes the user experience somewhat. — Kevin Raoofi, Apr 26 '18 at 21:44

score 2 · Answer 1 · answered Jun 30 '20 at 12:09

2

It happens to me and the issue was i am importing Router from react-router-dom instead of BrowserRouter as Router.

answered Jun 30 '20 at 12:09

Pawan Bishnoi

1,759
8
19

score 0 · Answer 2 · answered Apr 26 '18 at 21:11

Create a componentDidMount method in your root component, which will be responsible for logging in your user by redirecting the user to /login.

Then add a event listener for page refresh which will logout the user for any page refresh.

componentDidMount(){
    if(!userLoggedIn()){
        //redirect to login
        history.push("/login")
    }

    window.addEventListener('beforeunload', logoutTheUser);
    /* if you are not maintaining a session, you dont need this
      as user will be logged out automatically on page refresh.*/
}

`window.addEventListener('beforeunload', logoutTheUser); `It is getting called even I switch pages. I need to call only on page refresh not on changing menus — Maria Jeysingh Anbu, Apr 26 '18 at 21:17

Kevin Raoofi · Answer 3 · 2018-04-26T22:01:28.857

0

Just do something like:

const Refresh = ({reload, children}) => reload ? children : null;

...

<Refresh reload={performance.navigation.type === 1}>
    <Redirect to="/login"/>
</Refresh>

Based on:

edited Apr 26 '18 at 22:01

answered Apr 26 '18 at 21:40

Kevin Raoofi

1,023
11
16

I added this in route but it is not redirecting to login – Maria Jeysingh Anbu Apr 26 '18 at 21:58
sorry, I misunderstood. I thought you wanted to change the routes themselves if the page was reloaded. to do a redirect, you just have to render the Redirect component from React Router – Kevin Raoofi Apr 26 '18 at 22:02
`` How I use it for every page refresh? – Maria Jeysingh Anbu Apr 26 '18 at 22:04
Just render that snippet every time. It'll only conditionally render the redirect if the page has been refreshed – Kevin Raoofi Apr 26 '18 at 22:30

React Router | load component only on page refresh

3 Answers3