Error 404 with react-router

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

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?

1 Like

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?

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?

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?

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.

1 Like

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.