React Router V4：跳转至basename外页面及认证路由错误排查

问题1：如何导航到已定义basename范围之外的页面？ #

React Router的basename属性会给所有通过Router内部导航方法（比如history.push、Link组件）跳转的路径自动加上前缀。如果要跳转到basename覆盖范围之外的页面，不能使用React Router的内置导航方式，因为它们都会自动拼接basename。

你有两种可靠的方式实现跨basename跳转：

• 原生JS跳转：直接使用window.location.href或window.location.replace，比如：

  // 跳转到登录页，不受basename影响
  window.location.replace("/auth/login");
  

  用replace而不是直接赋值href的好处是，不会把当前未认证的页面加入浏览器历史记录，避免用户点击返回按钮回到无权限页面。
• 原生标签：使用普通的HTML链接，不要用React Router的Link组件：

  <a href="/auth/login">前往登录</a>
  

问题2：代码错误排查与跳转至basename外页面的解决 #

先看你标记的错误位置，这里有两个核心问题：

错误分析 #

1. Render函数返回值不符合要求：你的箭头函数在未认证时返回的是window.location = "/auth/login"——这是一个赋值表达式，返回的是字符串"/auth/login"，但React要求render prop必须返回一个有效的React元素（或者null/undefined），这种写法会触发React的渲染警告，甚至报错。
2. 跳转逻辑不严谨：直接赋值window.location虽然能跳转，但没有判断当前路径是否已经是目标页，可能导致无限循环跳转。

修正后的代码 #

const isAuthenticated = () => {
  // 简化判断逻辑，双重感叹号把值转为布尔类型
  return !!localStorage.getItem("jwtToken");
};

const AuthenticatedRoute = ({ component: Component, ...rest }) => (
  <Route 
    {...rest} 
    render={props => {
      if (isAuthenticated()) {
        // 已认证，渲染目标组件
        return <Component {...props} />;
      } else {
        // 未认证，跳转到basename外的登录页
        // 先判断当前路径是否已经是登录页，避免循环跳转
        if (window.location.pathname !== "/auth/login") {
          window.location.replace("/auth/login");
        }
        // 返回null，让React知道这里暂时没有可渲染的内容
        return null;
      }
    }} 
  />
);

class App extends Component {
  render() {
    return (
      <BrowserRouter basename="/editor">
        <Switch>
          {/* 你的路由配置 */}
          <AuthenticatedRoute path="/dashboard" component={Dashboard} />
          {/* 其他路由... */}
        </Switch>
      </BrowserRouter>
    );
  }
}

关键修改点说明 #

• 把箭头函数改为带大括号的形式，这样可以在内部执行跳转逻辑，而不是直接返回表达式
• 用window.location.replace实现跨basename跳转，避开React Router的basename前缀拼接
• 增加路径判断，防止重复跳转导致的无限循环
• 确保render函数始终返回一个合法的React节点（这里返回null，你也可以替换为加载提示组件）

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