Error 404 with react-router

[feverDream]

http://frespo.epizy.com/home

If you to this page and refresh the window it gives you a 404 page not found error. This is because I used react-router in my website which rewrites the URL. Because of this, everytime I refresh a page it throws error 404. How do I fix this? Do I set a custom .htacess command to fetch so and so content at some URL?

Help is appreciated

[KangJL]

@feverDream

http://frespo.epizy.com/home

If you to this page and refresh the window it gives you a 404 page not found error.

Try http://frespo.epizy.com
It will redirect to http://frespo.epizy.com/home instead

Can see you hv a lot of 404 errors.

What is in ur .htaccess file?

[Admin]

@feverDream

Do I set a custom .htacess command to fetch so and so content at some URL?

Yes! This is exactly what you’re supposed to do!

When you load the home page and then navigate to another page, Javascript is used to manipulate the path shown in the browser. When you refresh the page, the browser requests the page from the server. But the server doesn’t know the request should be forwarded to the HTML file serving the React app. So you need to tell the server to do that.

Does this help?

Does ReactJS give 403 error?

I merged your topics, please don’t create multiple topics about your React .htaccess rules. Your .htaccess rules look a bit odd to me. The block at the end does some URL rewriting based on the request URL. But I would expect some explicit reference to the index.html file, since that file is the central entrypoint/controller for your web pages. A quick web search pointed me to this .htaccess example, which looks a lot more likely to work to me:

[feverDream]

Ok so I fixed it but don’t know if there’s a better way. I added these lines of code to my :

In the FallThrough component, there’s this
export default function FallThrough() {
const url = “” + document.location.href.split(‘/’).pop();

    let retjsx;
    switch (url){
        case "":
            retjsx = <Redirect to="/home" />;
            break;
    
        case "?home":
            retjsx = <Redirect to="/home" />;
            break;
    
        case "?about":
            retjsx = <Redirect to="/about" />;
            break;
    
        case "?post":
            retjsx = <Redirect to="/post" />;
            break;
    
        default:
            retjsx = <Redirect to="/404.html" />
            break;
    }

    return retjsx;
}

Because the server can still match the root directory with flags

And in my htaccess file:
Redirect /about /?about
Redirect /home /?home
Redirect /post /?post

Is there a cleaner way to do this?

[feverDream]

So I fixed it now with this:
<Route exact path="/" component={FallThrough} />

And in that component I match it with its ? flag

export default function FallThrough() {
    const url = "" + document.location.href.split('/').pop();

    let retjsx;
    switch (url){
        case "":
            retjsx = <Redirect to="/home" />;
            break;
        
        case "?home":
            retjsx = <Redirect to="/home" />;
            break;
        
        case "?about":
            retjsx = <Redirect to="/about" />;
            break;
        
        case "?post":
            retjsx = <Redirect to="/post" />;
            break;
        
        default:
            retjsx = <Redirect to="/404.html" />
            break;
    }
    
    // if (validUrls.includes(url)) return <Redirect to={url} />
    // else return (
    return retjsx;
}

With my htaccess being:

Redirect /about /?about
Redirect /home /?home
Redirect /post /?post

Is there a cleaner way to do this?

[Admin]

@feverDream

Is there a cleaner way to do this?

Definitely! I gave you one! Please try it, it’s much cleaner than the solution you’re using now and doesn’t require you to add multiple pieces of configuration for every page you want to add.