我嘗試將 Login 組件包裝到 React 中的 Route 標記中，但現在它不再顯示在頁面中。你能告訴我是怎么回事嗎？
import React, {useState, useReducer} from 'react';
import './App.css';
import Login from './components/Login.js';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
function App() {
return (
<>
<Router>
<Routes>
<Route path="/something">
<Login />
</Route>
</Routes>
</Router>
</>
);
}
export default App;
uj5u.com熱心網友回復：
在react-router-domv6 中，Route組件在elementprop 上呈現其路由組件。Routechildren用于嵌套路由，嵌套的Route組件被渲染為Outlet.
<Router>
<Routes>
<Route path="/something" element={<Login />} />
</Routes>
</Router>
路線和路線
每當位置更改時，
<Routes>查看其所有children<Route>元素以找到最佳匹配并呈現 UI 的該分支。<Route>元素可以嵌套以指示嵌套的 UI，這也對應于嵌套的 URL 路徑。父路由通過渲染一個<Outlet>.<Routes> <Route path="/" element={<Dashboard />}> <Route path="messages" element={<DashboardMessages />} /> <Route path="tasks" element={<DashboardTasks />} /> </Route> <Route path="about" element={<AboutPage />} /> </Routes>筆記：
如果您希望將路由定義為常規 JavaScript 物件而不是使用 JSX，請嘗試使用 useRoutes。
默認
<Route element>值為<Outlet>. 這意味著即使沒有顯式 prop，路由仍會呈現其子element級，因此您可以嵌套路由路徑，而無需在子路由元素周圍嵌套 UI。例如，在以下配置中，父路由
<Outlet>默認渲染一個，因此子路由將在沒有任何周圍 UI 的情況下渲染。但是子路由的路徑是/users/:id因為它仍然建立在其父路由上。<Route path="users"> <Route path=":id" element={<UserProfile />} /> </Route>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/410591.html
標籤：