页面加载时 React-Router 打开路由

Question

我希望在用户打开我的页面时打开下面的第一条路线 (path="/tasks")。 现在，当用户打开我的页面时，他们看不到任何组件。 实现这一目标的最简单方法是什么？

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

Answer 1

您需要在path中使用数组并且不要忘记exact参数

<Route path=["/", "/tasks"] exact element={<AllTasks completeTask={completeTask} removeTask={removeTask} />} />

Answer 2

如果您希望"/tasks"路由成为一种“默认”路由，则将重定向呈现到该特定路由。

例子：

<Routes>
  <Route index element={<Navigate to="/tasks" replace />} /> // redirect to default path
  <Route
    path="/tasks"
    element={<AllTasks completeTask={completeTask} removeTask={removeTask} />}
  />
  ...
</Routes>