In my React app deployed at main--fascinating-melba-bd8f4d.netlify.app, I’m using react-router-dom, but I’m having trouble getting my nested routes to work. The child routes are supposed to only be accessible once the user successfully logs in. This is the code: <Route path='/private' element={<Auth />}><Route path='/private/my-profile' element={<MyProfile />} /><Route path='/private/sell-something' element={<Sell />} /></Route>
The nested routes work fine on my local server. Once users log in, they’re able to view their profile at localhost:3000/private/my-profile and the page for selling an item at localhost:3000/private/sell-something. But neither of those two child routes can be accessed on my Netlify site, even after a successful login. The React functional components, <MyProfile /> and <Sell />, which are passed to the Route elements, are not even rendered when a logged-in user goes to this or that URL. And when you’re not logged in, visiting these URLs does not result in your being redirected to the login page like it’s supposed to.
I have a public/_redirects file with the content /* /index.html 200, so the issue is not that I neglected to create that file. All of my routes work fine, except the nested ones.