0

I am using HashRouter to Route my SPA, the problem comes from the fact that i want the page to refresh when going back to the home tab, the base root "/" in my Header component i have

<LinkContainer to="/" onClick={window.location.reload}>
        <Navbar.Brand>
          <img src={logo} alt="" />
        </Navbar.Brand>
      </LinkContainer>

before i implemented HashRouter this worked, because i have a script in the home component to render a series of text, that text doesnt always render, before hashrouter if you went back to the homepage via the navbar brand, that text wouldnt render, i fixed that issue by causing the page to reload. (code for the sequence text below)

window.onload = () => {
    new SequenceRunner({
      // Selector targets the html container, in this case a <p> with class (sequence-runner)
      selector: ".sequence-runner",
      // Content to be displayed.
      content: ["Simple", "Reliable", "Affordable"],
      // Time
      delay: 2500,
    }).start();
  };

but now that ive started using hash router it is doing "localhost:3000/#/" as the base, and i believe its not recognizing the link containers request.

also here is my app.js

<HashRouter>
      <main>
        <Container fluid>
          <Header />
          <Route path="/contact" component={ContactUs} />
          <Route path="/terms-of-use" component={Terms} />
          <Route path="/privacy-policy" component={PrivacyPolicy} />
          <Route path="/support" component={Support} />
          <Route path="/signup" component={SignUp} />
          <Route path="/about" component={About} />
          <Route path="/pricing" component={Pricing} />
          <Route path="/features" component={TCFeatures} />
          <Route path="/" component={Home} exact />
          <Footer />
        </Container>
      </main>
    </HashRouter>
Austin Howard
  • 780
  • 4
  • 10
  • 24
  • There is no official way to do this, this is against the react-router way of using browser history to avoid page reload, you'll have to go with a workaround. Try https://stackoverflow.com/questions/46820682/how-do-i-reload-a-page-with-react-router – dee Jul 19 '21 at 20:28
  • I appreciate the responses, and the first and second answers are great, but i figured out a way around the reload, the main reason i needed the reload was that a script i had on the Home component would seemingly stop working once you navigated back to it from lets say the about component, if when clicking on the page logo forced a page refresh, it worked. however i managed to finangle the script to work regardless so forcing a page reload is no longer necessary. – Austin Howard Jul 20 '21 at 16:10

0 Answers0