React Router works on link click but not on url entering

Question

I have a simple app:

export default function App() {
  return (
     <div>
       <Routes>
         <Route element={<Layout />}>
           <Route index element={<Homepage />} />
           <Route path={homeUrl} element={<Homepage />} />
           <Route path={pageUrl} element={<Page1 />} />
         </Route>
       </Routes>
     </div>
  );
}

In my layout I have a navigation:

<NavLink to={homeUrl}>Home</NavLink>
<NavLink to={pageUrl}>Page</NavLink>

The links work perfectly - I click on the navigation links, the URL is changing and the page is rendering. But if I'm trying to enter the URLs directly (not with the links) or refreshing the page after clicking the links - I get 404.

Answer 1

You don't provide complete details but If I understand correctly, it can help you to solve your problem, if you have this problem on the server and when you open the homepage it works correctly and when open a subroute it goes to 404 page, add this to your .htaccess file

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