Hi i’ve been learning how to setup mern stack project according to freecodecamp’s youtube video: https://youtu.be/mrHNSanmqQ4
As a new react router dom new version (v6) has been released recently i’m having difficulties rendering components dependant on the ObjectId in the route. for example
rendering specific component with the ObjectId/_id params in the route such as “restaurants/5eb3d668b31de5d588f4293c” i get error that params is undefined;
it’s really frustrating as i’m still not fully familiar with ReactJs in order to integrate it with db properly.
If the tutorial is using version 5 of react-router-dom I would suggest you install that version instead of trying to use version 6 unless you are willing to upgrade and deal with any breaking changes.
yeah sorry i’ll try to be more coherent.
in that app i can click on item from the list of restaurant and it show redirect me to a route with the _id in the url. for example restaurants/5eb3d668b31de5d588f4292a.
when i get redirected i receive multiple errors on the client side “cannot read properties of undefined (reading ‘params’)”. so it’s hard for me to understand to how do i retrieve those params in react from the backend as params.
i hope i explained it clearly this time
ok so my problem now is the useParams only retrieves one value which is the ObjectId.
in the older version of react-router-dom you could pass all the props with render function:
meaning i can’t access the full props as the older version. so i can’t access values like props.history , props.location etc.
because i don’t pass it as render function with the following props: {...props}
i’m sorry but i can’t deploy my code live as i haven’t finished the final part of the tutorial to deploy and integrate backend and frontend
edit:
this is how printing props in console in the older version of react-router
so the issues i’m facing right now are if i click a specific restaurant it’s loading the details well except the reviews which i added some on my db. it just can’t retrieve from the db the reviews referred to the _id of specific restaurant.
besides that when i press add review i get the following errors:>
react-dom.production.min.js:216 TypeError: Cannot read properties of undefined (reading 'state')
at ue (add-review.js:10)
at la (react-dom.production.min.js:157)
at Kl (react-dom.production.min.js:267)
at Pu (react-dom.production.min.js:250)
at Tu (react-dom.production.min.js:250)
at Ou (react-dom.production.min.js:250)
at bu (react-dom.production.min.js:243)
at react-dom.production.min.js:123
at t.unstable_runWithPriority (scheduler.production.min.js:18)
at Qo (react-dom.production.min.js:122)
cl @ react-dom.production.min.js:216
react-dom.production.min.js:123 Uncaught TypeError: Cannot read properties of undefined (reading 'state')
at ue (add-review.js:10)
at la (react-dom.production.min.js:157)
at Kl (react-dom.production.min.js:267)
at Pu (react-dom.production.min.js:250)
at Tu (react-dom.production.min.js:250)
at Ou (react-dom.production.min.js:250)
at bu (react-dom.production.min.js:243)
at react-dom.production.min.js:123
at t.unstable_runWithPriority (scheduler.production.min.js:18)
at Qo (react-dom.production.min.js:122)
and on login page when i fill the inputs and pressing login (this is just a dummy login it doesn’t validate anything). i get that error:
login.js:19 Uncaught TypeError: Cannot read properties of undefined (reading 'push')
at onClick (login.js:19)
at Object.We (react-dom.production.min.js:52)
at Ye (react-dom.production.min.js:52)
at react-dom.production.min.js:53
at Tr (react-dom.production.min.js:100)
at Nr (react-dom.production.min.js:101)
at react-dom.production.min.js:113
at Re (react-dom.production.min.js:292)
at react-dom.production.min.js:50
at Mr (react-dom.production.min.js:105)
onClick @ login.js:19
We @ react-dom.production.min.js:52
Ye @ react-dom.production.min.js:52
(anonymous) @ react-dom.production.min.js:53
Tr @ react-dom.production.min.js:100
Nr @ react-dom.production.min.js:101
(anonymous) @ react-dom.production.min.js:113
Re @ react-dom.production.min.js:292
(anonymous) @ react-dom.production.min.js:50
Mr @ react-dom.production.min.js:105
Zt @ react-dom.production.min.js:75
Jt @ react-dom.production.min.js:74
t.unstable_runWithPriority @ scheduler.production.min.js:18
Qo @ react-dom.production.min.js:122
De @ react-dom.production.min.js:292
Xt @ react-dom.production.min.js:73