提供以下沙箱,不确定要了解如何呈现Bb组件
import React from "react";
import "./styles.css";
import { Routes, Route } from "react-router";
import { BrowserRouter } from "react-router-dom";
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="a" element={<Aa />}>
<Route path="b" element={<Bb />} />
</Route>
</Routes>
</BrowserRouter>
);
}
function Aa() {
return (
<p>
Hello
</p>
);
}
function Bb() {
return <p>World</p>;
}
https://codesandbox.io/s/still-shadow-337zc?file=/src/App.js
浏览到/ a / b仅呈现Aa组件
react-router v6公开了Outlet
您必须在父Route内使用的元素,以便可以通过react-router-dom的iside呈现任何嵌套的子代
import React from "react";
import "./styles.css";
import { Routes, Route } from "react-router";
import { BrowserRouter, Outlet } from "react-router-dom";
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="a" element={<Aa />}>
<Route path="b" element={<Bb />} />
</Route>
</Routes>
</BrowserRouter>
);
}
function Aa() {
return <p>Hello <Outlet /></p>;
}
function Bb() {
return <p>World</p>;
}
如果只想Bb
渲染,a/b
则将其定义为单独的路线,例如
<BrowserRouter>
<Routes>
<Route path="a" element={<Aa />}/>
<Route path="a/b" element={<Bb />} />
</Routes>
</BrowserRouter>
您可以在此处详细了解有关路线结构的更多信息
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句