Refreshing page Redirects to homepage

🙋Get Help
1

Hey there. I am having a bit of an issue with the theme I am building. Whenever I refresh a page in my browser, the app loads the page and the redirects to homepage. I have tried to simplify it as much as possible but the issue persists.

I have made a component Page. Here is how it looks:

import React, { useEffect } from "react"
import { connect, styled } from "frontity"
// import List from "./list";
import FeaturedMedia from "./featured-media"

const Post = ({ state, actions, libraries, data }) => {

  // Get the data of the post.
  const page = state.source[data.type][data.id];

  // Get the html2react component.
  const Html2React = libraries.html2react.Component;

  /**
   * Once the page has loaded in the DOM, prefetch both the
   * home pages and the list component so if the user visits
   * the home page, everything is ready and it loads instantly.
   */
  useEffect(() => {
    actions.source.fetch("/")
    // List.preload()
  }, [])

  // Load the page, but only if the data is ready.
  return data.isReady ? (
    <>
      {/* Look at the settings to see if we should include the featured image */}
      {state.theme.featured.showOnPost && (
        <FeaturedMedia id={page.featured_media} title={page.title} />
      )}

      {/* Render the content using the Html2React component so the HTML is processed
       by the processors we included in the libraries.html2react.processors array. */}
      <Container>
  			<Html2React html={page.content.rendered} />
      </Container>

    </>
  ) : null;
};

export default connect(Post);

const Container = styled.div`
  max-width: 1200px;
  margin: 0 auto;
`

And here my switch component on the homepage index:

<Switch>
  <Loading when={data.isFetching} />
  <Page when={data.isPage} data={data}/>
  <List when={data.isArchive} />
  <Post when={data.isPostType} />
  <PageError when={data.isError} />
</Switch>

If I navgiate to a page via my menu, it all works fine, the issue only happens when trying to land on a specific page for example example.com/example-page

Moreover I am basically just using a very slightly modified version of Mars theme. Only thing I have added is a custom handler for a menu. I tried completely removing that and it didn’t change anything. Issue persists.

Please let me know what else I can provide to make this easier. Any help will be appreciated.

2

Can anyone help with this? Issue still persists for me.

3

Hi @ni.bonev

Do you have a repo with your project that we can take a look at? If so we can clone your project to see if we can reproduce the issue you’re experiencing. We can also see the code examples you’ve given above in the broader context which might help us in getting to the root of the issue.

4

Hi @mburridge.

Thanks for the quick reply. The repository is private and unfortunately I don’t have the opportunity to make it public. However, if you give me a bitbucket email I can give you access or I can share all the code that would be needed to test this.

Greetings,
Nikolay

5

Hey @mburridge,

just as I wrote your message I had an epiphany and managed to find the issue. It was completely my mistake, nothing to do with frontity, just a beginner JS mistake.
In my logo, I had added an onClick event handler but instead of passing an arrow function with actions.router.set('/') I was actually invoking the function. :see_no_evil:

So in my code I had this: onClick={actions.router.set('/')}
Instead of this: onClick={() => actions.router.set('/')}

Thanks for your help. I will close this issue.

2 Likes
6

Awesome, glad you managed to sort it @ni.bonev

1 Like