Source:  Twitter logo

Good evening, the problem I have has to do with react router.

Here is my App.js in which all my routes are being processed

const App = () => (

      <div className="App">
        <MediaQuery minWidth={700}>
  {(matches) => {

    if (matches) {
      return (<Router>
    <div>
      <Headroom>
      <Header />
      </Headroom>
      <main>
        <Route exact path='/' component={homepage} />
        <Route path='/home' component={homepage} />
        <Route path='/OurPubs' component={OurPubs} />
        <Route path='/OurEmail' component={OurEmail} />
        <Route path='/OurQuest' component={OurQuest} />
        <Route path='/StayRelevant' component={StayRelevant} />
        <Route path='/GetCurious' component={GetCurious} />
        <Route path='/TheGoods' component={TheGoods} />
        <Route path='/post/:slug' component={Post}>
<Redirect from="*" to="/" />
        </Route>

      </main>
    </div>
  </Router>

As I use GraphQL to fetch data and work with templates (where every Post represents a Route in a sense)

As <Route path='/post/:slug' component={Post}> brings the user to the different Posts.

Now if on mobile, after cache deletion, the browser will show a ERROR 404 message. Which is correct, after all the url post/XXXX does not actually exist on the server.

Not Found <br /> The requested URL /post/XXXX was not found on this server.

The problem only occurs on refresh inside a post or on mobile after exit of the browser.

The question is how I can simply bring the user from an unknown route back to path="/" (home)?

When the call from server to fetch a post with that slug resolves in Post component, you need to check if it was 404, if yes then you'll navigate the User to home page.

...
fetch('/post/abc-post').then((obj) => {
  // check if you have 404 error
  if (obj.statusCode === 404) {
    this.props.history.push('/');
  }
})
...

If you give me more info about Post component, or where that call is made I can give you confident solution but the basic idea would be like above.

1 users liked answer #0dislike answer #01
Hamza Baig profile pic
Hamza Baig

TL;DR: Configure your HTTP server to redirect all requests to /index.html


The problem here seems to be that your HTTP server is returning 404. This means that when you access /index.html (where the React code is), the application is loaded, and as the user interacts with the app, the URL changes without page reload with react-router.

When you refresh, you are asking your HTTP server for a file that is not your React app. So you should configure your HTTP server to redirect all requests (like /post/XXXX) to /index.html.

This question may help: https://serverfault.com/questions/188373/apache-2-2-rewrite-force-all-requests-to-index-html

1 users liked answer #1dislike answer #11
Murilo Cruz profile pic
Murilo Cruz

the one of fast way, you can set an Interceptor in your api client like fetch api,superagent and etc like this :

 if (!!response && response.status === 404) {
        store.dispatch(push("/404"));
    }
0 users liked answer #2dislike answer #20
miladbruce profile pic
miladbruce

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).