React Router实现未匹配路由自动重定向至首页的方法

要实现访问未定义路径自动跳转到首页，只需要在你的路由配置里添加一个匹配所有路径的兜底路由，具体操作如下：

1. 先从react-router-dom导入Navigate组件
2. 在Root的children路由数组末尾，新增一个路由项，用path="*"匹配所有未被定义的路径，再通过Navigate组件重定向到首页"/"

修改后的完整代码如下：

import { createBrowserRouter, RouterProvider, Navigate } from 'react-router-dom';
// 假设Root、Users、Places组件已正确导入

const router = createBrowserRouter([
  {
    element: <Root />,
    children: [
      { path: "/", element: <Users /> },
      { path: "/users", element: <Users /> },
      { path: "/places", element: <Places /> },
      // 新增的兜底重定向路由
      { path: "*", element: <Navigate to="/" replace /> }
    ],
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

这里的replace属性是可选的，加上它会让重定向替换当前的历史记录条目，用户点击浏览器返回按钮时不会回到那个不存在的路径，体验更友好。

内容的提问来源于stack exchange，提问作者Suraj Prajapati