![](/img/trans.png)
[英]How to link to Routes inside the component rendered by another Route with React Router
[英]How to access previous index route in nested routes using Link component from react router?
我正在构建一个小型 React 应用程序,并且我已经实现了这样的路线:
import React, { lazy } from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
const App = lazy(() => import("./App"));
const Home = lazy(() => import("./Pages/Home"));
const Registro = lazy(() => import("./Pages/Dashboard"));
const Summary = lazy(() => import("./Pages/Summary"));
const Inventario = lazy(() => import("./Pages/Inventario"));
const Estadisticas = lazy(() => import("./Pages/Estadisticas"));
const Dashboard = lazy(() => import("./Pages/Dashboard"));
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<BrowserRouter>
<Routes>
<Route path="/" element={<App />}>
<Route index element={<Home />} />
<Route path="dashboard" element={<Dashboard />}>
<Route index element={<Summary />} />
<Route path="estadisticas" element={<Estadisticas />} />
<Route path="inventario" element={<Inventario />} />
</Route>
</Route>
</Routes>
</BrowserRouter>
</React.StrictMode>
);
如您所见,我的 Dashboard 组件中有一些嵌套路由,我在其中使用 index 属性将 Summary 组件设置为默认匹配。 我的仪表板组件是这样的:
import { Outlet, Link } from "react-router-dom";
export default function Dashboard() {
return (
<div>
<nav>
<ul>
<li><Link to="/">Summary</Link></li>
<li><Link to="estadisticas">Estadisticas</Link></li>
<li><Link to="inventario">Inventario</Link></li>
</ul>
</nav>
<Outlet/>
</div>
);
}
当我尝试使用导航从Link to="/"访问 Summary 组件时,我的问题就来了,而不是呈现 Summary 组件,它呈现 Home 组件。 我也尝试过使用Link to="dashboard" ,但 url 最终变成了像仪表板/仪表板这样的东西,这是行不通的。 有什么方法可以使用链接访问摘要组件吗?
问题在于以"/"
字符开头的路径被认为是绝对路径。 这就是为什么“摘要”链接一直链接回"/"
而不是父路径"/dashboard"
的原因。
你可以使用"."
作为父路径的目标,如果用户位于"/dashboard"
"/dashboard/estadisticas"
或"/dashboard/inventario"
路径,则为“/dashboard”。
例子:
function Dashboard() {
return (
<div>
<nav>
<ul>
<li>
<Link to=".">Summary</Link>
</li>
<li>
<Link to="estadisticas">Estadisticas</Link>
</li>
<li>
<Link to="inventario">Inventario</Link>
</li>
</ul>
</nav>
<Outlet />
</div>
);
}
抱歉,目前我无法在官方文档中找到此功能,尽管有关于使用".."
来“删除父路径的一部分”的简短说明。 ".."
与"."
的用途相似。 . 请注意,如果它是Estadisticas
或Inventario
之一,则将使用".."
来呈现“上一级”的链接。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.