CODEWITHSUNDEEP
javascriptreactjsframeworksrouter
gibbers
gibbers

Reputation: 484

React Router shows blank page until refresh

I'm learning React and this project involves React Router. I have read a number of tutorials but can't get them to work for my project

Basically, the issue is that my React routes work in that the URL changes and the page changes, but it changes to a blank index.html unless reloaded, where it works correctly.

My App.js renders <Profile /> when accessToken is made:

  return (
    <BrowserRouter>
      <AppContainer>
        <GlobalStyle />
          <Switch>
            <Route exact path ='/' component={withRouter(accessToken ? Profile : Login)} />
            <Route exact path ='/playlist' component={withRouter(Playlist)} />
          </Switch>
      </AppContainer>
    </BrowserRouter>
  );

And <Profile /> has the Link to <Playlist />:

    return (
        <Wrapper>
            <Banner user={user} />
            <Link to='/playlist'>Find New Music</Link>
            <Favorites history={history} />
        </Wrapper>
    );

Which is just a template right now:

const Playlist = () => {
    return <h1>Hello</h1>
}

The works, and redirects to localhost:3000/playlist, but that route displays a white screen. When refreshed, <h1>Hello</h1> is correctly displayed. Does anyone have an idea of why this happens?

Upvotes: 1

Views: 2058

Answers (1)

gibbers
gibbers

Reputation: 484

Found the bug.

useEffect(() => window.location.hash = '', []);

breaks routing. It was a quick fix hidden in the Profile.jsx component to a different problem and I will have to look into a better method.

Upvotes: 1

Related Questions