我有一個安裝了 react-router-dom v6 的 create-react-app 專案。嘗試使用新的索引路由語法，以便我的 HomePage 組件在當前為 Layout 組件提供服務的索引處呈現。當我導航到索引 (http://localhost:3000/) 時，它會在而不是 HomePage 組件中呈現具有站點名稱的布局組件（“主頁”不呈現）。
謝謝您的幫助！
代碼如下：
應用程式.js
import './App.css';
import {Routes, Route, Outlet, Link, BrowserRouter as Router} from "react-router-dom";
import Layout from "./components/layout/Layout";
import HomePage from "./pages/Home";
function App() {
return (
<div className="App">
<Router>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<HomePage />} />
</Route>
</Routes>
</Router>
<Outlet />
</div>
);
}
export default App;
主頁.js
const HomePage = () => {
return (
<div>
<h1>Home Page</h1>
</div>
)
}
export default HomePage
布局.js
import data from "../../config/siteconfig.json"
const settings = data.settings;
const Layout = ({children}) => {
return (
<div>
<h1>{settings.sitename}</h1>
{children}
</div>
)
}
export default Layout
uj5u.com熱心網友回復：
如果您希望Route呈現嵌套組件，則該Layout組件應Outlet為它們呈現一個以供呈現。使用childrenprop 將Layout是直接包裝子組件。
換句話說，這是之間的區別
<Route
path="/"
element={(
<Layout>
<HomePage /> // <-- rendered as children
</Layout>
)}
/>
和
<Route path="/" element={<Layout />}>
<Route index element={<HomePage />} /> // <-- rendered as nested route
</Route>
建議的代碼更新：
import { Outlet } from 'react-router-dom';
const Layout = ({children}) => {
return (
<div>
<h1>{settings.sitename}</h1>
<Outlet />
</div>
);
};
...
function App() {
return (
<div className="App">
<Router>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<HomePage />} />
</Route>
</Routes>
</Router>
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/397224.html