到达路由器的问题嵌套路由

Question

我在到达路由器嵌套路由时遇到问题，我正在尝试导航到 / 并呈现 page2，但是当路由更改为 // 时，我被困在同一页面的“/”主页上 //

<Appjs>
import React from "react";
import "./App.css";
import Homepage from "./Components/Homepage";
import Details from "./Components/Details";



function App() {
  return (
    <div>
      <Router>
        <Homepage path="/">
          <Details path="details" />
        </Homepage>
      </Router>
    </div>
  );
}

export default App;

import React, { Component, useEffect, useState } from "react";
import styled, { isStyledComponent } from "styled-components";
import NavLink from "./NavLink";
import { Link } from "@reach/router";

const Homepage = () => {
const [users, setUsers] = useState([]);

  return (
    <React.Fragment>
      <div className={"container"}>
        <Styleddiv>
          <h2>Select an Account</h2>
          <div style={{ padding: 0 }}>
            {Object.values(users).map((item) => (
              <Link to={`details/${item.name}`}>
                <img src={item.profilepicture} alt="Girl in a jacket"></img>
                <span>{item.name}</span>
              </Link>
            ))}
          </div>
        </Styleddiv>
      </div>
    </React.Fragment>
  );
};

export default Homepage;

在路由器内部构建路由时我是否遗漏了什么，请帮助我

所以在主页中，如果我点击任何链接，路线将更改为 /details，但详细信息页面无法呈现

https://codesandbox.io/s/billowing-hill-j5gmy?file=/src/Homepage.js

Answer 1

您是否错过了 App.js 文件中的 Router 导入？

import React from "react";
import { Router, Link } from "@reach/router";

import Homepage from "./Homepage";
import Details from "./Details";

export default function App() {
  return (
    <div>
      <nav>
        <Link to="/">Home</Link>
        <Link to="dashboard">Detail</Link>
      </nav>
      <Router>
        <Homepage path="/" />
        <Details path="dashboard" />
      </Router>
    </div>
  );
}

编辑：Code Sand Box

Answer 2

这就是我使用嵌套路由的方式

Code sandbox

为了嵌套路由，您需要将它们放置在路由的子组件中。

使用 render 属性而不是 component，因为它会阻止内联功能组件在每次渲染时重新挂载，see explanation。

match 对象包含有关路由如何匹配 URL 的信息，因此我们可以使用 url 属性创建嵌套路由，该属性为我们提供 URL 的匹配部分 see explanation。