如何在ReactJS组件中通过React Router V4重定向到服务器路由

嘿，这事儿不难，我们用React Router v4提供的Redirect组件就能搞定！下面是修改后的完整代码，我给你一步步说明：

首先，你需要先导入Redirect组件——毕竟这是React Router里负责重定向的核心组件：

import { BrowserRouter, Route, Redirect } from 'react-router-dom';

然后修改你的AuthenticatedRoute组件，当未认证时，用Redirect跳转到你的服务器页面（不管是同域名的后端路由还是外部服务器地址，直接填到to属性里就行）：

const isAuthenticated = () => { 
  let hasToken = localStorage.getItem("jwtToken"); 
  return !!hasToken; // 简化一下判断逻辑，更简洁直观
};

const AuthenticatedRoute = ({ component: Component, ...rest }) => (
  <Route 
    {...rest} 
    render={props => 
      isAuthenticated() ? 
        <Component {...props} /> : 
        <Redirect to="/server-login" /> // 这里替换成你的服务器页面路由，比如"/login"或者完整的服务器URL
    } 
  />
);

最后，你的App组件里正常使用这个AuthenticatedRoute就好：

class App extends Component { 
  render() { 
    return ( 
      <BrowserRouter basename="/editor">
        {/* 这里放你的路由配置，比如受保护的仪表盘路由 */}
        <AuthenticatedRoute path="/dashboard" component={Dashboard} />
        {/* 其他公共路由，比如首页、登录入口 */}
        <Route path="/home" component={Home} />
      </BrowserRouter>
    );
  }
}

小补充： #

• 如果你的服务器页面是外部域名的，直接把to的值改成完整的URL就行，比如<Redirect to="https://your-auth-server.com/login" />
• 实际项目里，isAuthenticated函数可以再优化下，比如检查token是否过期，而不只是判断有没有token，这样安全性更高

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