0

我在到达路由器嵌套路由时遇到问题，我正在尝试导航到 / 并呈现 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

4

2 回答 2

0

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

代码沙箱

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

使用renderprop 而不是，component因为它会阻止内联功能组件在每次渲染时重新安装，请参阅说明。

match 对象包含有关路由如何匹配 URL 的信息，因此我们可以使用url为我们提供 URL 匹配部分的属性来拥有嵌套路由，请参阅说明。

于 2020-06-18T23:48:18.893 回答
0

您是否错过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>
  );
}

编辑：代码沙盒

于 2020-06-18T22:42:01.927 回答