Javascript 如果reactrouterdom中的url有错误参数，请添加路径

组件Route的path属性只使用URL路径部分进行路由匹配，添加hash/queryString将不起作用，实际上会 destruct 路由匹配.

我建议创建一个组件，该组件可以读取hash/queryString并有条件地呈现被路由的组件，或者在没有"匹配"的情况下发出反向导航.

示例:

const PasswordReset = () => {
  const navigate = useNavigate();
  const { hash } = useLocation();
  
  // Create a URLSearchParams object from the hash value
  const searchParams = React.useMemo(() => new URLSearchParams(hash), [hash]);

  // Unpack any token values
  const accessToken = searchParams.get("access_token");
  const tokenType = searchParams.get("token_type");

  // Unpack any error values
  const error = searchParams.get("error");
  const errorCode = searchParams.get("error_code");
  const errorDescription = searchParams.get("error_description");

  // Compute which component type you want to render
  const isNewPass = accessToken && tokenType;
  const isAuth = error && errorCode && errorDescription;

  useEffect(() => {
    // If no "match" then navigate back
    if (!(isNewPass || isAuth)) {
      navigate(-1);
    }
  }, [isNewPass, isAuth, navigate]);

  // Render appropriate "match"
  if (isNewPass) {
    return <NewPass />;
  } else if (isAuth) {
    return <Auth />;
  }

  // No "match" render null
  return null;
};

const router = createBrowserRouter([
  {
    path: "/",
    element: <Auth />,
  },
  {
    path: "/chatroom",
    element: <App />,
  },
  {
    path: "/psdResetEmail",
    element: <ResetPassword />,
  },
  {
    path: "/psdReset",
    element: <PasswordReset />,
  },
]);