REACT- webpack compiled successfully, nothing shows in my browser-CodePudding

This is my first attempt at creating a navbar using REACT. Although webpack compiled successfully, nothing shows in my browser. Can I have some help please? This is the github repo for the project:

https://github.com/mah752/myportfolio thank you,

Maryan

CodePudding user response：

So this looks like it's something to do with the way you have implemented your routes. If you were too boot up your app and check the console you would see.

router.ts:5 Uncaught Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app.

I have looked through your code and noticed that you have the routes in your nav bar as well as index.js so you're inserting <Router> inside another <Router> which breaking things. As <App /> has your navbar which has the <Router> component also.

I would highly suggest going through this tutorial on React Router

https://reactrouter.com/docs/en/v6/getting-started/tutorial

This will tell you how to implement your routers correctly and go over nested routes.

Also another tip. I noticed you have a lot of files in your components folder for example:

Project.js
Project.css

The best practice is to do create a directory for each component and create a css module file like so:

components/projects/... This would now look like

Project.module.css
Project.js

But going back to your issue, go through the link on React Router and you should be fine.

CodePudding user response：

I've cloned your repo and I see the following error in the browser:

Module not found: Error: Can't resolve './app.css' in '/home/atota/development/myportfolio/src'

Open src/App.js and on line 10, you're doing the following import:

import "./app.css";

Whereas it should be:

import "./App.css";

Spoiler alert: after resolving this error, you'll see the following one in the Browser Dev Tools, related to your component:

Uncaught Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app.

I see you're using react-router-dom, I suggest you to take a look at the docs.