0

This is my first post here :) so be cool with me please :)

I try to do a custom 404 with create-react-app V.17.0.2 and react-router-dom V.5.2.0. It works when i try on local server but something is wrong when i deploy on github-pages. I have only one path='/', and i want all the others redirect to my error404 component.

I made one in an other project lastProject published on Netlify and to fix this i have just create a _redirects file in the public folder and write /* /index.html 200 inside , it works perfectly. Here works Netlify

i want to find a same easy solution to published on github-pages. I don't want to change the BrowserRouter by Hashrouter and have a '#' in my URL, and this solution is very difficult to me

My repo if you need it

MyNewProject

EDIT: So now i use hashrouter and wait to see an other easy solution

import React from 'react';
import { Route, Switch } from 'react-router-dom';

import Header from '../Header';
import Main from '../Main';
import Footer from '../Footer';
import Error404 from '../Error404'

function App() {  
  return (
    <div className="App" >
      <Switch>
        <Route exact path='/'>          
          <Header />
          <Main/>         
          <Footer/>
        </Route>
        <Route component={Error404}/>      
      </Switch>
    </div>
  );
}

export default App;
KaraStras J.B
  • 1
  • 1
  • Sorry, i didn't see your comment. when i try this, i have no error message, my custom 404 appears – KaraStras J.B May 14 '21 at 18:22
  • Read [404 when trying to enter a react app route](https://stackoverflow.com/a/62050700/2873538). And check [this repo](https://github.com/rafgraph/spa-github-pages) (and its demo[demo](https://spa-github-pages.rafgraph.dev/)) for help on "How to create a custom 404 page that redirects to index.html page" when using github pages. – Ajeet Shah May 14 '21 at 18:24
  • Yep i saw it too but the way to add a 404 htlm file in own project is a little difficult to me. I thought there is an easier way like with Netlify, just add a file `_redirects` in `/public` and put `/* /index.html 200` and that's all folks.... – KaraStras J.B May 14 '21 at 19:38
  • i think i will migrate my site on Netlify and that's all, i don't want to use hashrouter and have an '#' in my URL and the 404html way is very difficult to me, so... – KaraStras J.B May 14 '21 at 19:51

1 Answers1

0

To do this, you need to configure .htaccess file


<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]

</IfModule>

https://gist.github.com/alexsasharegan/173878f9d67055bfef63449fa7136042

Saleh Shojaei
  • 1
  • 2
  • Hello , thanks to your fast answer i added it in root directory and deploy the site but it not working to me... – KaraStras J.B May 14 '21 at 12:58
  • It works! https://ibb.co/fpdqBtd use CTRL + F5 to see it – Saleh Shojaei May 14 '21 at 13:07
  • No this is my last projects , and 404 works without htaccess but not on my actual project https://jerome-burrus.me/ I edited the post to no trouble like that – KaraStras J.B May 14 '21 at 13:10
  • Oh, that's right https://stackoverflow.com/questions/46056414/getting-404-for-links-with-create-react-app-deployed-to-github-pages – Saleh Shojaei May 14 '21 at 13:17
  • yep i saw this post today but i don't understand why it don't work on this project like this and with the last there is no issue... its the same issue on with github and netlify while my last project is published on Netlify.... and with the hasrouter the URL become ugly... but i will try it the harder solution is more complcate for me but i will try it too – KaraStras J.B May 14 '21 at 13:27
  • With the Hasrouter replace the BrowserRouter it works ! but now my url is uggly... – KaraStras J.B May 14 '21 at 13:34
  • Ok now i know what's the difference between my last and actual project, i have edited this difference in my post, there is an file added to Netlify , the`_redirects` file – KaraStras J.B May 14 '21 at 13:53