如何使用反应路由器中的 Link 组件访问嵌套路由中的先前索引路由？

Question

我正在构建一个小型 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 访问 Summary 组件而不是呈现 Summary 组件时，我的问题就来了，它呈现 Home 组件。我也尝试过 Link to="dashboard"，但是 url 最终变成了 dashboard/dashboard 之类的东西，这是行不通的。 有什么方法可以从使用 Link 到访问摘要组件？

Answer 1

问题

问题在于以 "/" 字符开头的路径被认为是绝对路径。这就是为什么“摘要”link 一直 link 回到 "/" 而不是父路径 "/dashboard".

解决方案

您可以使用 "." 作为父路径的目标，"/dashboard" 如果用户在 "/dashboard/estadisticas" 或 "/dashboard/inventario" 路径上。

示例：

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 之一，则将使用 ".." 渲染 link 以“上升一个级别”。

如何使用反应路由器中的 Link 组件访问嵌套路由中的先前索引路由？

How to access previous index route in nested routes using Link component from react router?

reactjs

react-router

react-router-dom

react-hooks

问题

解决方案