Why root page is not opening when starting react app?-CodePudding

MyRouter.js

export default function MyRouter() {
return (
<Router>
  <Header title="MyTodosList" />
  <Routes>
    <Route path="/" element={<App />}  />
    <Route path="/about" element={<About />} />
    <Route path="*" element={<NotFound/>}/>
  </Routes>
  <Footer />
</Router>
 );
 }

Index.js

const root = ReactDOM.createRoot(document.getElementById('main'));

root.render(
<React.StrictMode>
<MyRouter />
</React.StrictMode>
);

package.json

{
"name": "todos-list",
"version": "0.1.0",
"private": true,
"homepage": "https://MohitRaikwar.github.io/todos-list",
"dependencies": {
"@popperjs/core": "^2.11.5",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.1.3",
"gh-pages": "^4.0.0",
"jquery": "^3.6.0",
"popper.js": "^1.16.1",
"react": "^18.2.0",
"react-bootstrap": "^2.4.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.33.1",
"react-router-bootstrap": "^0.26.2",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}

Whenever I run the app by npm start , the first component that loads is Notfound component but why App Component("/") is not rendering at start of the app ??

enter image description here

CodePudding user response：

Try this?

<Route path="/" exact element={<App />} />

CodePudding user response：

Add basename in Router.

<Router basename="/todos-list">
   ...
</Router>