React Router 6 and Typescript - index attribute Type 'true' is not assignable to type 'false | undefined'.?

Question

I'm trying to create an index route for one of my child routes in it's parent route but I keep on getting and error which says Type 'true' is not assignable to type 'false | undefined'. How do I fix it?

<Routes>
  <Route path="/" element={<Profile />}>
    <Route index path="/username" element={<ProfileDetails />} />
    <Route path="settings/profile" element={<EditProfile />} />
  </Route>
  <Route path="/login" element={<Login />} />
  <Route path="/register" element={<SignUp />} />
</Routes>

Answer 1

You don't need a path when index is true because whenever there is a profile page you will see your profile details. Purpose of index is to use when we want the path of parent to used.

<Routes>
  <Route path="/" element={<Profile />}>
    <Route index element={<ProfileDetails />} />
    <Route path="settings/profile" element={<EditProfile />} />
  </Route>
  <Route path="/login" element={<Login />} />
  <Route path="/register" element={<SignUp />} />
</Routes>

Answer 2

Fixed it. It was because of the path

<Routes>
  <Route path="/" element={<Profile />}>
    <Route index element={<ProfileDetails />} />
    <Route path="/username" element={<ProfileDetails />} />
    <Route path="settings/profile" element={<EditProfile />} />
  </Route>
  <Route path="/login" element={<Login />} />
  <Route path="/register" element={<SignUp />} />
</Routes>