Nested Routing in react js. Make default component on user click

February 19, 2023

<BrowserRouter>
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='users' element={<Users />} >
            <Route path='user1' element={<User1 />} />
            <Route path='user2' element={<User2 />} />
            <Route path='user3' element={<User3 />} />
          </Route>
        </Routes>
</BrowserRouter>

____________________________________________

import React from 'react'
import { NavLink, Outlet } from 'react-router-dom'

function Users() {
    return (
        <div>
            <NavLink to='user1'>User1</NavLink>
            <NavLink to='user2'>User2</NavLink>
            <NavLink to='user3'>User2</NavLink>
            <Outlet/>
        </div>
    )
}

export default Users;

I am using react router dom@6. While hitting users url wanted to make user1 as a default component to show on screen along with users and it also redirects url to users/user1

>Solution :

You can use the <Navigate> element.

<Route path='users' element={<Users />} >
    <Route path='' element={<Navigate to="users/user1" replace/>} />
    <Route path='user1' element={<User1 />} />
    <Route path='user2' element={<User2 />} />
    <Route path='user3' element={<User3 />} />
</Route>