I want the first Route below (path="/tasks") to open when a user opens my page. Now when a user opens my page they don't see any of the components. What is the easiest way to achieve this?
<Routes>
<Route path="/tasks" element={<AllTasks completeTask={completeTask} removeTask={removeTask} />} />
<Route path="/upcoming" element={<UpcomingReminders completeTask={completeTask} removeTask={removeTask} />} />
<Route path="/today" element={<TodaysReminders completeTask={completeTask} removeTask={removeTask} />} />
<Route path="/form" element={<Form />} />
<Route path="/missed" element={<MissedTasks removeTask={removeTask} completeTask={completeTask} />}></Route>
<Route path="/recurring" element={<Recurring completeTask={completeTask} removeTask={removeTask} />}></Route>
<Route path="/completed" element={<CompletedTasks removeCompletedTask={removeCompletedTask} />}></Route>
<Route path="/about" element={<About />} />
</Routes>
You need to use an array in path and don't forget the exact parameter
<Route path=["/", "/tasks"] exact element={<AllTasks completeTask={completeTask} removeTask={removeTask} />} />
If you want the "/tasks" route to be a sort of "default" route then render a redirect to that specific route.
Example:
<Routes>
<Route index element={<Navigate to="/tasks" replace />} /> // redirect to default path
<Route
path="/tasks"
element={<AllTasks completeTask={completeTask} removeTask={removeTask} />}
/>
...
</Routes>