POST 404 Not Found caused by bad routing?-CodePudding

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

CodePudding user response：

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>
 

   )
}

CodePudding user response：

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