Google Play Auth OAuth重定向URL本地测试路由加载失败求助

核心问题出在路由配置的参数类型不匹配：

• 你写的路由path="/succesful/:code?"是路径参数（要求code放在URL路径里，比如/succesful/asasasa）
• 但OAuth返回的是查询参数（code在?后面，属于URL的查询部分，比如/succesful/?code=asasasa）
  这就导致路由无法匹配，页面自然加载失败。

解决步骤：

1. 修改路由配置，去掉路径参数，改成普通路径：

   <ProtectedRoute path="/succesful" component={Connection}/>
   

   React Router会自动忽略URL的查询参数部分，只要路径/succesful匹配就会渲染组件。

2. 在Connection组件中获取查询参数：
   如果你用的是函数组件，用useLocation钩子配合URLSearchParams解析：

   import { useLocation } from 'react-router-dom';
   
   function Connection() {
     const location = useLocation();
     const searchParams = new URLSearchParams(location.search);
     const code = searchParams.get('code');
     const scope = searchParams.get('scope');
     // 现在就可以使用code和scope了
     return <div>认证成功，code：{code}</div>;
   }
   

   类组件的话可以通过this.props.location.search获取查询字符串，再用同样的方式解析。

3. 检查ProtectedRoute的权限逻辑：
   确认认证成功后，你的应用已经正确标记了登录状态，避免因为ProtectedRoute的权限校验不通过，导致组件无法渲染。

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