Я пытаюсь создать довольно простой блог, но зацикливаюсь на маршрутах.
У меня есть компонент BlogPost, который отображает заголовок, контент, ссылку и раздел комментариев. Я пытаюсь использовать данные users, которые я получил с помощью axios, чтобы показать страницу с информацией о пользователях, но я борюсь с.
import React from 'react';
import {Comments} from './Comments';
import {Link} from 'react-router-dom';
import axios from 'axios';
//Pass down user data to Author to get latitude and longitude
export class BlogPost extends React.Component {
constructor(props) {
super(props);
this.state = {
posts: [],
users: []
}
}
componentDidMount() {
axios.all([
axios.get(`https://jsonplaceholder.typicode.com/posts/${this.props.match.params.postId}`),
axios.get(`https://jsonplaceholder.typicode.com/users`)])
.then(axios.spread((posts, users) => {
this.setState({ posts: posts.data, users: users.data})
console.log(posts.data.title)
console.log(users.data[0].id)
}))
}
render() {
return (
<div className="blog-post">
<img src="https://picsum.photos/300/300" alt="#"/>
<h1 className="blog-post-h1">{this.state.posts.title}</h1>
<p className="blog-post-p">{this.state.posts.body}</p>
<Link to={`/authors/`} params={ this.state.users } className="button">
Author's Profile
</Link>
<Comments />
</div>
)
}
}
class App extends React.Component {
render() {
return (
<Router>
<div className="container">
<Nav />
<Route exact path="/" component={ViewPreview} />
<Route exact path="/posts/:postId" component={BlogPost} />
<Route exact path="/authors/:userId" component={Author} />
</div>
</Router>
)
}
}
export default App;