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;
The above is my app.js file , I am trying to navigate to details page using a Link tag in my Homepage component
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;
My issues is The details page dont render after navigating to /details page, Only if I refresh the page it renders properly. Please help me out, beating my head over this one for few days
UPDATE State is an Object that is returned when i call the 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;