Reactjs Website is showing 404 page on google cache

Think like a reactjs developer with good seo, I created the website in reactjs and I added the website url to the google console to get ranked. Everything is working fine on the code side but google is storing cache of the webiste which is not good.

https://webcache.googleusercontent.com/search?q=cache:http://websouls.com/shared-hosting

that’s the url I recived from the google if I hit this url “cache://mysite.com/shared-hosting” , so this show 404 component.

okay so this is wrong if the route is “http://websouls.com/shared-hosting” so it’s means it will go to the shared hosting component.

404 component means this line of code

so I debug the issue, I put the console.log in the App.js file and I add these line

const location = useLocation();

const currentURL = location.pathname;

console.log(“current route is: “, currentURL)
console.log(“full url: “, window.location.href)

so the google url is showing me the “current route is: /search” but this /search is not in the routes. If I’m checking the route is “/shared-hosting” it’s means the route must be ‘/shared-hosting”

I’m looking for the perfect solotion that rank mysite pages on google.

For example if we hit this url ” http://webcache.googleusercontent.com/search?q=cache%3A%2F%2Freact.dev%2F&rlz=1C1GCEA_enPK1020PK1020&oq=cache%3A%2F%2Freact.dev%2F&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIGCAEQRRg60gEINTkyMGowajeoAgCwAgA&sourceid=chrome&ie=UTF-8&safe=active&ssui=on” this is the cache version of the “react.dev” website which is perfectly cached by the google. I want to do that same stuff in mysite.