I have a problem with nesting routes inside route. User component has tabs and I want to display components based on URLs like this /profile/:userid/about and /profile/:userid/posts and /profile/:userid.
<Routes>
<Route path="/" element={<HomePage/>}/>
<Route path="profile/:username/*" element={<ProfilePage/>}/>
<Route path="login" element={<Login/>}/>
<Route path="register" element={<Register/>}/>
</Routes>Profile routes
<ProfileContentWrapper className='rightPanel'>
<PorfileTabs/>
<Routes>
<Route path='/about' render={() => <ProfileAbout/>}/>
<Route path='/posts' render={() => <ProfilePosts/>}/>
</Routes>
</ProfileContentWrapper>You need to use the full path in ProfileContentWrapper as well.
<Route path='profile/:username/about' render={() => <ProfileAbout/>}/>
<Route path='profile/:username/posts' render={() => <ProfilePosts/>}/>
Ok. I have found a problem in react-router v6 useRouteMatch is replaced with useMatch. In v6 I need to pass the route pattern to useMacht("profile/:username/")