Unmatched requests entered in the URL don't hit the backend - express

Question

I have an app with frontend and backend. The user can login and sign up and perform CRUD operations. All of the requests defined in the backend are hitting the api. However, some unmatched requests that the user enters in the search bar like: https://myapp.com/foo/bar/foo/bar/ don't hit the backend (I am trying to redirect all such requests by using app.all() by appending it to the end of all the routes in the app). When I enter an unmatched request in the backend api directly, it returns the correct response. SS attached below:
However entering an unmatched from the frontend does nothing. In the network request tab, this is what I see. The request type is document and initiator is other. Also, the request is not logged at the backend. How to solve this issue?
Routes:
import express from 'express'
import { userSignUp, userLogin } from '../controller/userController.js'
const router = express.Router()
router.post('/login', userLogin)
router.post('/signup', userSignUp)
export default router
import express from 'express'
import authorization from '../middlewares/authorization.js'
import {
createTest,
getAllTest,
getSingleTest,
deleteTest,
updateTest,
} from '../controller/workoutController.js'
const router = express.Router()
// router.use(authorization)
//Get everything
router.post('/getAll', getAllTest)
//Get a single workout
router.get('/:id', getSingleTest)
//Post a new workout
router.post('/', createTest)
//Delete a single workout
router.delete('/:id', deleteTest)
//Update a single workout
router.patch('/:id', updateTest)
export default router
server.js file
import dotenv from 'dotenv'
dotenv.config()
import express from 'express'
import morgan from 'morgan'
import workoutRoutes from './router/workout.js'
import userRoutes from './router/user.js'
import mongoose from 'mongoose'
import cors from 'cors'
import multer from 'multer'
import rateLimit from 'express-rate-limit'
import SlowDown from 'express-slow-down'
const app = express()
const upload = multer()
app.use(upload.array())
//get the response in json
app.use(express.json())
//using morgan to log requests
app.use(morgan('dev'))
//using cors to make fetch requests
app.use(cors())
//routes
app.use('/api', userRoutes)
app.use('/api', workoutRoutes)
app.all('*', (req, res) => {
res.status(400).send({ message: 'Invalid Route' })
})
//connect to DB
mongoose
.connect(process.env.MONG_URI)
.then((data) => {
app.listen(process.env.PORT, () => {
console.log('Listening on Port', process.env.PORT)
})
})
.catch((err) => {
console.log(err)
})
Edit 1: Was checking my console.log and saw this console.warn logged for the routes that are unmatched. My best guess now is that react-router is not letting the request hit the api.
SS attached for reference.

Answer 1

I have found the answer and posting this for future geniuses. This goofy question exists because of my lack of understanding of react-router.
I am using react-router and basically inside the browser window all of the routing is handled by the react-router. So, when you hit a path in the address bar, the react router first checks it's routes if that path exists. If it does, the component that exists at that path is rendered (the request is NOT sent to the backend. Requests only reach the backend when a component at that path renders and uses fetch or any other api to get data). Otherwise, it looks for a handler for that path which you can set up using *. Example:
<Routes>
<Route path="/" element={<Homepage />} />
<Route path="/:id" element={<SingleBlog />} />
<Route path="/createBlog" element={<CreateBlog />} />
<Route path="/:id/edit" element={<EditBlogs />} />
<Route path="/signup" element={<SignupForm />} />
<Route path="/login" element={<LoginForm />} />
<Route path="*" element={<Page404 />} />
</Routes>
This path with * will serve every url that the react-router does not recognize(This does not mean you shouldn't have a check in the backend. Imagine a person modifiying the request and sending it to the backend). A request is sent to the backend using fetch or axios or any other api. When a page is rendered, you will probably have set up apis to fetch you data from the backend and if that route doesn't exist in the backend then you need to set-up a handler in the backend to catch it and send a response to the user.