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

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

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。

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

2 个答案: