Принцип функционала: есть страница юзеров полученная с API. При нажатии какого то из юзеров происходит переход с помощью Navlink. При переходе должна появиться страница юзера, но в итоге пусто и сама компонента не появляется.
Возможно проблема с Navlink т к указал неправильный путь
переход NavLink:
{
props.users.map( u => <div key={u.id}>
<NavLink to={'/profile/' + u.id}>
<div className={s.card}>
<img className={s.card_img} src={userPhoto} alt="avatar" />
<div className={s.card_text}>
<div>
<p className={s.card_name}>{u.name}</p>
<p>1 общий друг</p>
</div>
<div>
{
// МЕСТО С ОТОБРАЖЕНИЕМ КАРТИНОК
u.followed
? <button className={s.adduser} onClick={() => {props.unFollowow(u.id)}}><img className={s.adduser} src="https://www.svgrepo.com/show/487269/delete-profile.svg" alt="u" /></button>
: <button className={s.adduser} onClick={() => {props.follow(u.id)}}><img className={s.adduser} src="https://www.svgrepo.com/show/47844/add-friend.svg" alt="f" /></button> }
</div>
</div>
</div>
</NavLink>
</div>)
}
Контейнерная компонента я профиля юзера:
import React from "react";
import Profile from "./Profile";
import { setProfile } from "../../redux/profile-reducer";
import { connect } from "react-redux";
import { useParams } from 'react-router-dom';
import axios from "axios";
export function withRouter(Children){
return(props)=>{
const match = {params: useParams()};
return <Children {...props} match = {match}/>
}
}
class ProfileContainer extends React.Component {
componentDidMount() {
let userId = this.props.match.params.userId;
axios.get(`https://social-network.samuraijs.com/api/1.0/profile/` + userId)
.then(response => {
this.props.setProfile(response.data.items);
})
};
render() {
return (
<Profile {...this.props} profile={this.props.profile} />
)
}
}
let mapStateToProps = (state) => {
debugger
return {
profile: state.state.profile
}
};
let withUrlDataContainerComponent = withRouter(ProfileContainer)
export default connect(mapStateToProps, {setProfile})(withUrlDataContainerComponent)
Профиль юзера:
import React from "react"
import s from "./Profile.module.css"
import Newposts from "./Newposts/Newposts"
import MypostsСontainer from "./Myposts/MypostsСontainer"
import ProfileInfo from "./ProfileInfo/ProfileInfo"
const Profile = (props) => {
return (
<div className={s.profile}>
<ProfileInfo props={props} />
<Newposts />
<MypostsСontainer/>
</div>
)
}
export default Profile
и App.js с роутерами:
import './App.css';
import Header from "./components/Header/Header"
import Navbar from "./components/Navbar/Navbar"
import ProfileContainer from './components/Profile/ProfileContainer';
import Dialogs from './components/Dialogs/Dialogs'
import UserContainer from './components/User/UserContainer';
import {BrowserRouter, Routes, Route} from "react-router-dom";
import store from './redux/redux-store';
function App(props) {
return (
<>
<BrowserRouter>
<div className='containerHtml'>
<Header/>
<section className='glav'>
<Navbar/>
<Routes>
<Route path='/dialogs' element={ <Dialogs state={props.state} />}/>
<Route path='/profile:userId' element={<ProfileContainer />}/>
<Route path='/user' element={<UserContainer />}/>
</Routes>
</section>
</div>
</BrowserRouter>
</>
);
}
export default App;
Простой
