Question

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

import React from "react";
import "./App.css";
import Homepage from "./Components/Homepage";
import { Link, Router } from "@reach/router";
import Details from "./Components/Details";

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

export default App;

上面是我的app.js文件，我正在尝试使用“主页”组件中的“链接”标签导航到详细信息页面

import React, { Component } from "react";
import styled, { isStyledComponent } from "styled-components";
import Api from "../API/Accounts";
import { Link } from "@reach/router";

    const Homepage = () => {
    const [State] = Api("https://panorbit.in/api/users.json");

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

    export default Homepage;

我的问题是，导航到/ details页面后，不会渲染“详细信息”页面，只有当我刷新页面时，它才能正确渲染。请帮我，好几天不停地动脑筋

更新 状态是当我调用API时返回的对象

import react, { useEffect, useState } from "react";
import axios from "axios";

const Api = (Api) => {
  const [data, setData] = useState([]);
  useEffect(async () => {
    const result = await axios(Api).then((x) => setData(x.data.users));
  }, []);

  return [data];
};

export default Api;

Answer 1

认为应该是：

<Details path="details" />

代替

<Details path="/details" />

到达路由器：仅在使用链接标记导航后刷新页面后，组件才会呈现

1 个答案: