我有一个安装了 react-router-dom v6 的 create-react-app 项目。尝试使用新的索引路由语法,以便我的主页组件呈现在当前为布局组件提供服务的索引处。当我导航到索引 (http://localhost:3000/) 时,它会呈现带有网站名称的布局组件,但不会呈现主页组件(“主页”不会呈现)。
感谢您的帮助!
代码如下:
App.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
最佳答案
如果您想要渲染嵌套的 Route
组件,那么 Layout
组件应该渲染一个 Outlet
以便将它们渲染到其中。如果 Layout
直接 包装子组件,则使用 children
属性。
换句话说,就是区别
<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>
);
}
关于javascript - 嵌套索引路由未在 react-router-dom v6 中呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70523280/