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

user_15896612 0
Viewed 3195

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>

You can view this image for more clarity on what I'm trying to say

react-router-dom typescript reactjs
2 Answers

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>
user_158966120

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>

user_152281600
Related