Как правильно сделать маршрутизацию в React при использовании React-router-dom?

Question

[TechnicaL]

Я новичок в разработке и сейчас в голове большая путаница.
У меня есть вложенные компоненты и самый дочерний компонент должен отображать данные пользователя.
При обновлении страницы данные исчезают, так как при отресовки компонента на сервер летит запрос о пользователе из адресной строки, profile/:userId? во вложенном компоненте получается такая адресная строка /profile/about.
Вместо /profile/number в запросе оказывается /profile/string и ответ приходит 404 так как таких страниц не существует.
При перезагрузки страницы такая же ситуация.
Если я вставляю в путь /${match.url}/about то получается правильный путь /profile/7777/about но не происходит отрисовка страницы и при перезагрузке выдает ошибку Failed to execute 'pushState' on 'History': A history state object with URL

В App.js родительский компонент оборачивается в withRouter, а withRouter оборачивается в BrowserRouter

App.js

class App extends React.Component{  componentDidMount(){   this.props.is_initialization()      }    
 render(){    
     let{initializationSeccess} = this.props
  if(!initializationSeccess) return <>LOADING</>
    return (<div className="grid" >        
            <Switch>             
               <Route exact path= {`/profile/:userId?`}  render={() => <ProfileConteiner  />} />                            
            </Switch>
           </div>
        ); } }      
 let setStateToProps = (store) => {
     return{
        initializationSeccess: store.initialization.success,     
     }
 }    
let ContainerApp = compose(  
    withRouter,    
    connect(setStateToProps , { is_initialization })
)(App); 
let NovaKraina = () => {
return <BrowserRouter> <Provider store={store}> <ContainerApp/> </Provider>  </BrowserRouter>
}
export default NovaKraina

Это компонента ProfileContainer в момент монтирования компоненты она отрисовывает компоненту Profile и вызывает санкриэйтор в componentDidMount который отправляет GET запрос profile/UsersID на север для отрисовки профиля пользователя

ProfileContainer компонента

class ProfileConteiner extends React.Component<PropsTypes, OwnStateProps> {  
    drawComponent (){       
         let {setUsers, match, generalId, history} = this.props         
                    setUsers(match.params.userId, generalId,)  
     }
     componentDidMount() {        
        this.drawComponent()      
     }    
    render() { 
        let {userProfileId} = this.props
        return  <Profile {...this.props}  userProfileId={userProfileId}  onSubmit={this.submit}  />
    }
}
let mapStateToProps = (state: RootReducerType) : MapStateProps  => {   
        return {                         
            profile: getProfile(state),  
            generalId: getOwnUserId(state)
}}
export default compose(
    withRouter,
    withAuthRedirect,
    connect<MapStateProps, MapDistpathProps, OwnStateProps, RootReducerType>(mapStateToProps,  {  setUsers  })
)(ProfileConteiner)

В этой компоненте находятся ссылки на компоненты которые должны отрисовываться

Profile компонента

const Profile:React.FC<PropsType> = (props: PropsType) => { 
 let {  profile,  userProfileId} = props
 let match = useRouteMatch(); 
    return (<div className={d.wrap}>        
            <User userData={profile} />
            <ProfileUserNavigation  /> 
            <Switch> 
                <Route exact path={`/profile/`} render={() => <ProfilePage profile={profile} /> }/>             
                <Route exact path={`/profile/about`} render={() => <AboutContainer />} />
                <Route exact path={`/profile/about_overview`} render={() => <AboutContainer />} />
                <Route  path={'/profile/about_work_and_education'} render={() => <AboutContainer />} />
            </Switch>
          </div>
    )
}
export default Profile;

ProfileUserNavigation это навигация для profile

ProfileUserNavigation компонента

const ProfileUserNavigation: React.FC<UserNavigationType> = (props: UserNavigationType) => {  
    return (
        <div className={d.nav}>
            <div className={d.nav_info}>
                <NavLink to={`/profile/`} activeStyle={{backgroundColor: "rgb(46, 46, 46)"}}>Хроника</NavLink>
                <NavLink to={ `/profile/about`} activeStyle={{backgroundColor: "rgb(46, 46, 46)"}}>Информация</NavLink>
                <NavLink to={ '/profile/friends'} activeStyle={{backgroundColor: "rgb(46, 46, 46)"}}>Друзья</NavLink>  
                <NavLink to={ '/profile/fotos'} activeStyle={{backgroundColor: "rgb(46, 46, 46)"}}>Фото</NavLink>
            </div>            
            <div className={d.nav_edit_profile}>Редактировать проф...</div>
        </div>
    )
}
export default ProfileUserNavigation;

Запрос на сервер для получения данных о пользователе

Api.ts

export const profileApi = { 
  profileUserId: (userId: number | null) => {  
    return instance.get<ProfileResponseUserId>(`profile/` + userId)
  },
}

Спасибо за любую помощь