REACT-RUTER-DOMV6中的嵌套路由 [英] Nested routing in react-router-dom V6

问题描述

我希望你们都做得很好。最近我用Reaction做了一个项目，做了一个样品here。问题出在路由上。我想将子路由显示在其父路由下，但遗憾的是我没有成功。如果有人能解释这个问题或修复代码，我将不胜感激。

应用

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>
  );
}

Main

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>
  );
}

Main

请注意，所有链接和路径也已更新为相对链接/路径而不是绝对链接/路径。

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>
  );
}

这篇关于REACT-RUTER-DOMV6中的嵌套路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！