React router nesting routes inside route

Question

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>

https://stackoverflow.com/questions/36345851/react-router-parametrized-routes-syntaxerror-expected-expression-got — armin jahani, Mar 27 '22 at 11:48

score 0 · Answer 1 · answered Mar 27 '22 at 11:30

0

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/>}/>

answered Mar 27 '22 at 11:30

Anton

1,045
1
7
16

score 0 · Answer 2 · answered Mar 29 '22 at 12:51

0

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/")

answered Mar 29 '22 at 12:51

Vitoo

21
5

React router nesting routes inside route

2 Answers2