POST 404 Not Found caused by bad routing?

Question

Getting 404 not found for POST in my subpage (GET is working). All normal pages (not child) seem to be working fine. Here's my current setup in index.js:

                    <Route exact path="/Categories">
                    <Categories />
                    </Route>    

                    {/*POST not working in this page*/}
                    <Route path="/Categories/Subcategories">
                        <Subcategories />
                    </Route>

Tried putting route inside the category component but that gave me different result of what I'm looking for. I want the pages to be completely separate (and I'm pretty sure Post didn't work with that nesting setup aswell).

Request URL: http://localhost:3000/subcategories
Request Method: POST
Status Code: 404 Not Found
Remote Address: [::1]:3000
Referrer Policy: strict-origin-when-cross-origin

Edit: Tried changing the route setup and replacing the containers with components:

import CategoriesTable from './../../components/CategoriesTable/CategoriesTable';
import SubcategoriesTable from './../../components/SubcategoriesTable/SubcategoriesTable';
               <Switch>
                    <Route exact path="/">
                        <HomePage />
                    </Route>
                    <Route path="/Categories" element={<CategoriesTable />}>
                        <Route path="/Categories/Subcategories" element={<SubcategoriesTable />} />
                    </Route>
               </Switch>

Now opening categories page doesn't display the component.

Edit2: after updating to react-router-dom to the newest version the components render, however I'm still getting 404 Not Found

Answer 1

try this :

<Route path="/Categories" element={<Categories />}>
 <Route path="/Categories/Subcategories" element={<Subcategories />} />
</Route>
        

and you should put <Outlet /> in your <Categories/> component in a place where you want to show your <Subcategories/> component: for ex:

import { Outlet } from 'react-router-dom'
export default function Categories() {
  
    return (
        <div >
            <h1 >Categories</h1>
            <Outlet />
        </div>
 

   )
}
  

Answer 2

Had to also add app.post('/subcategories', ...) to server's index.js. Initially thought that app.get('/subcategories', ...) would be enough