Как правильно отрисовать классовую компоненту?

Question

[smoovil]

Принцип функционала: есть страница юзеров полученная с 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;

Answer 1

[n1ksON]

<NavLink to={'/profile/' + u.id}>
<Route path='/profile:userId' element={<ProfileContainer />}/>

Comments

[smoovil]

Так у меня же такой же самый код?

[Kentavr16]

smoovil, давай с начала - что именно не работает? Проверял консоль браузера?

[smoovil]

Kentavr16,
Происходит переход по нажатию на пользователя

Здесь указан номер пользователя и на этой странице должнен отображаться его профиль

Вот что в консоли

[n1ksON]

smoovil, вот именно. В ссылках лишний слэш. В одном месте profile/123
А в роутере указали prorfile:id , а должно быть profile/:id