为什么启动react应用程序时未打开根页面

Question

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>
);
}

索引.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"
}

每当我通过npm启动运行应用程序时，加载的第一个组件是Notfound组件，但为什么应用程序组件("/")在应用程序启动时没有呈现？？

在此处输入图像描述

编辑：我使用修复了它

<Route path="/todos-list" element={ <Navigate to ="/" />} />

但仍然想知道为什么根路径默认情况下不打开？｛我是新反应的-U-｝

Answer 1

试试这个？

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

Answer 2

在Router中添加basename。

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