我希望你們一切都好。最近我用react完成了這個項目,並在這裡製作了一個示例。問題出在路由上。我想在其父級下顯示子路由,但不幸的是我沒有做到。如果有人可以解釋問題或修復代碼,我將不勝感激。
應用程序
import "./styles.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from "./Login";
import Main from "./Main";
export default function App() {
return (
<div className="App">
<Router>
<Routes>
<Route path="/" element={<Login />} />
<Route path="/main" element={<Main />}></Route>
</Routes>
</Router>
</div>
);
}
主要的
import React from "react";
import {
BrowserRouter as Router,
Routes,
Route,
Outlet,
Link
} from "react-router-dom";
import Child1 from "./Child1";
import Child2 from "./Child2";
export default function Main() {
return (
<div>
<h1>main page</h1>
<Link to="/main/child1">child 1</Link>||||
<Link to="/main/child2">child 2</Link> ||||
<Link to="/">log out</Link>
<Outlet />
<Routes>
<Route path="/main/child1" element={<Child1 />} />
<Route path="/main/child1" element={<Child2 />} />
</Routes>
</div>
);
}
孩子 1 & 2
export default function Child1() {
return <div>Child1</div>;
}
export default function Child2() {
return <div>Child2</div>;
}
最好的。
主要問題是您的根路徑匹配器的指定方式與嵌套路徑不匹配,因此Main
組件被卸載。
應用程序
這裡的路徑Main
應該指定一個通配符匹配器以允許子路由的繼續匹配,path="/main/*"
。
export default function App() {
return (
<div className="App">
<Router>
<Routes>
<Route path="/" element={<Login />} />
<Route path="/main/*" element={<Main />} /> // <-- allow sub-route matches
</Routes>
</Router>
</div>
);
}
主要的
請注意,所有鏈接和路徑也已更新為相對鏈接/路徑與絕對鏈接。
export default function Main() {
return (
<div>
<h1>main page</h1>
<Link to="child1">child 1</Link> ||||{" "}
<Link to="child2">child 2</Link> ||||{" "}
<Link to="/">log out</Link>
<Outlet />
<Routes>
<Route path="child1" element={<Child1 />} />
<Route path="child2" element={<Child2 />} />
</Routes>
</div>
);
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句