Я просто хотел подтвердить, ожидается ли вывод консоли, который я вижу ниже, или я сделал что-то не так.
У меня есть следующий код реакции:
function BlogPost() {
let location = useLocation();
const [error, setError] = React.useState<string>(null);
const [isLoading, setLoading] = React.useState<boolean>(true);
const [posts, setPosts] = React.useState<PostModel[]>([]);
React.useEffect(() => {
fetch("http://localhost:63166/api/posts/")
.then(res => res.json())
.then((posts: PostModel[]) => {
setPosts(posts);
setLoading(false);
},
(error) => {
console.log(error);
setLoading(false);
setError(error);
})
}, []);
if (!posts || posts.length < 1) {
console.log("not found");
return (
<NotFound />
);
}
else if (error) {
console.log("error");
return (
<Error />
);
}
else if (isLoading) {
console.log("loading");
return (
<div>Loading...</div>
);
}
console.log("routes");
return (
<TransitionGroup>
<CSSTransition
key={location.key}
classNames="fade"
timeout={300}>
<Switch location={location}>
<Route exact={true} path="/blog">
<AllPosts posts={posts} />
</Route>
<Route path="/blog/:postName">
<Post posts={posts} />
</Route>
</Switch>
</CSSTransition>
</TransitionGroup>
);
}
export default function Index() {
console.log("start");
return (
<section id="blog" className="section">
<div className="container section-wrapper">
<Router>
<BlogPost />
</Router>
</div>
</section>
);
}
Когда я перейдите на страницу / blog. В окне консоли разработчика я вижу следующее:
Это правильно? Я использую React 16.13.1, response-router 5.1.2 и response-transition-group 4.3.0.