Page is refreshing every time a new route is clicked - React SPA

Help
, ,
1

Hi,

I’m a bit confused if I have set up everything the right way. I basically have the following setup:

<BrowserRouter>
  <AuthProvider
    domain={ auth0Domain }
    clientId={ auth0ClientId }
    useRefreshToken={ true }
    redirectUri={ window.location.origin }
    cacheLocation="localstorage"
  >
    <App />
  </AuthProvider>
<BrowserRouter>

I have asked about the cacheLocation property in another post but do not really understand the answer - in my opinion it does not matter if the information is stored in a cookie (which has to be accepted by the browser) or in the local storage. Anyway, this is working fine and my user keeps being logged in on a page refresh.

Unfortunately I have another problem now. I use react-router and thus I “switch back and forth” between different pages. My <App /> component basically looks like so:

const App: React.FC = () => {

  const { isAuthenticated } = useAuth0();

  if ( isAuthenticated ) {
    return (
      <>        
        <Navbar />
        <Suspense fallback={ "Lazy loading pages ..." }>
          <Switch>
             <Route exact path="/" component={ Dashboard } />
             <Route path="/item1" component={ Item1 } />
             <Route path="/item2" component={ Item2 } />
         </Switch>
       </Suspense>
      </>
    );
  }

  return <Login />
};

My intention is that if the user is not logged in, he sees the Login Page and else the Admin Interface including the different routes. This also works fine so far but I realised that on every refresh, Auth0 checks the token and redirects. This is OK when refreshing the browser but not as nice when I click on my routes since the user sees the Login Page for a short moment before seeing the appropriate content. I can over come this by setting the isLoading prop around the App component but also then I would see an entire different screen when clicking through my Nav Items…

Can someone please help? This is driving me crazy. I have also followed this tutorial but it seems that the same problem applies here.

2

Just found the solution… I’m so sorry!!! I have used links with href instead od the Link component provided by React Router.

So make sure you have the

<Link to='/your-route'></Link>

from

import { Link } from 'react-router-dom'

and all is good.

2 Likes
3

Thanks for sharing it with the rest of community!