Маршрутизатор охвата: компоненты отображаются только при обновлении страницы сразу после перехода с помощью тега Link - PullRequest
Новая
       69

Маршрутизатор охвата: компоненты отображаются только при обновлении страницы сразу после перехода с помощью тега Link

0 голосов
/ 16 июня 2020

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;

Это мое приложение. js файл, я пытаюсь перейти на страницу сведений, используя Тег Link в моем компоненте домашней страницы 

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, только если я обновлю sh страницу, которая отображается правильно. Пожалуйста, помогите мне, бью головой над этим несколько дней

ОБНОВЛЕНИЕ Состояние - это объект, который возвращается, когда я вызываю 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;

1 Ответ

0 голосов
/ 16 июня 2020

думаю, это должно быть:

<Details path="details" />

вместо

<Details path="/details" />

...