DEV Community

I can't able to see any UI in my browser. But error in browser console while routing using react-router-dom package.

Kunguma Sakthivel K on September 25, 2023

Uncaught TypeError: Cannot set properties of undefined (setting 'props') import HomePage from "./components/HomePage"; import ContactPage from...
Collapse
 
dshaw0004 profile image
Dipankar Shaw

I can not see any error but one thing I will suggest you

BrowserRouter should wrap all of your component.

Place the Header after BrowserRouter

Collapse
 
kungumasakthivel profile image
Kunguma Sakthivel K

I tried your solution, but it doesn't work. Same error pops in the browser console.

error

Uncaught TypeError: Cannot set properties of undefined (setting 'props')

Collapse
 
dshaw0004 profile image
Dipankar Shaw

Send the GitHub repo url of this project

I will check it later

Thread Thread
 
kungumasakthivel profile image
Kunguma Sakthivel K

github.com/kungumasakthivel/React-...
All components are in src folder. It doesn't consist of node_modules folder.

Thread Thread
 
mohiyaddeen7 profile image
mohiyaddeen7

In your Route for the "project" path, you are missing a slash / at the beginning of the path. It should be /project instead of "project".

Thread Thread
 
kungumasakthivel profile image
Kunguma Sakthivel K

Yeah I corrected the path. But still I can't able to render the UI

Thread Thread
 
mohiyaddeen7 profile image
mohiyaddeen7

What about the error?

Thread Thread
 
kungumasakthivel profile image
Kunguma Sakthivel K

Thanks for you help. I solved the problem.

Thread Thread
 
mohiyaddeen7 profile image
mohiyaddeen7

How did you solve it?

Collapse
 
dshaw0004 profile image
Dipankar Shaw

check out this. it this okay ?

blank-repl.dsx4.repl.co

Collapse
 
kungumasakthivel profile image
Kunguma Sakthivel K

Yeah man that good. How did you do this!

Collapse
 
dshaw0004 profile image
Dipankar Shaw

I just replace class components with function components.

Don't use class components if your not doing any state management or you don't need the life cycle events.

Use function components if the component is not doing any state management.

Use class components when you need to do lots of state management or you need to use the life cycle events.

for dumb components use function.

If you want I can create a pull request to your repo so you can easily get the changes.

Thread Thread
 
kungumasakthivel profile image
Kunguma Sakthivel K

Yeah ok. Thx for helping out.

Thread Thread
 
kungumasakthivel profile image
Kunguma Sakthivel K

May I get your Discord or any social media for communication. So, I can able to communicate with you for any future query and I makes easy for us.

Thread Thread
 
dshaw0004 profile image
Dipankar Shaw

I not on FaceBook or Instagram. I have twitter but I don't use it anymore. But you can contact me on it, I will start using it again
twitter

I also have a telegram bot my telegram bot
using /sendtomaster command you can send me a message through the bot.

this bot is currently under-construction so I can not contact you back through it but use this bot when you see no response twitter

Collapse
 
mohiyaddeen7 profile image
mohiyaddeen7

Switch is replaced with Routes in previous updates

Collapse
 
dshaw0004 profile image
Dipankar Shaw • Edited

I also think this is the problem but I can't clearly say without knowing react-router version of this project

Collapse
 
kungumasakthivel profile image
Kunguma Sakthivel K

I'm using "react-router-dom": "^5.3.4" version

Collapse
 
kungumasakthivel profile image
Kunguma Sakthivel K

Im using "react-router-dom": "^5.3.4". So, I need to use Switch tag for multiple routes.
Here is my GitHub repo you can check it out
github.com/kungumasakthivel/React-...