React Router重定向显示空白页，请求无Token路由拦截解决方案

嘿，我来帮你搞定这两个React Router的问题，一步步来哈！

重定向后页面空白大概率是路由匹配逻辑出了问题，给你几个排查方向和修复方案：

• 确保所有路由和重定向都在<Switch>内部：Switch组件会从上到下匹配第一个符合的路由，如果你把Redirect放在Switch外面，或者Route结构混乱，就可能导致组件无法正确渲染。
• 检查Redirect的to路径是否有效：比如你重定向到/login，但一定要在Switch里定义对应的<Route path="/login" component={Login} />，否则路径不存在自然会显示空白。
• 谨慎使用exact属性：如果父路由加了exact，子路由就匹配不到了。比如你有/dashboard和/dashboard/settings，父路由/dashboard不要加exact，否则子路由会无法渲染。
• 确认组件是否正确导入导出：比如你的Dashboard组件是不是默认导出了？有没有拼写错误？

给你一个正确的基础路由结构示例：

import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom';
import Login from './components/Login';
import Dashboard from './components/Dashboard';
import NotFound from './components/NotFound';

class App extends Component {
  render() {
    const token = localStorage.getItem('access_token');
    return (
      <BrowserRouter>
        <Switch>
          {/* 登录页路由 */}
          <Route path="/login" component={Login} />
          {/* 后台首页路由 */}
          <Route path="/dashboard" component={Dashboard} />
          {/* 根路径重定向 */}
          <Redirect from="/" to="/login" exact />
          {/* 未匹配到任何路由时的404页面 */}
          <Route component={NotFound} />
        </Switch>
      </BrowserRouter>
    );
  }
}

最优雅的方式是封装一个私有路由组件（PrivateRoute），这样所有需要鉴权的页面都可以复用这个组件，不用重复写判断逻辑：

第一步：创建PrivateRoute组件 #

// src/components/PrivateRoute.js
import { Route, Redirect } from 'react-router-dom';

const PrivateRoute = ({ component: Component, ...rest }) => {
  // 从localStorage获取token
  const token = localStorage.getItem('access_token');
  
  // 这里可以额外加token有效性验证，比如JWT解码检查过期时间
  const isTokenValid = token ? true : false; // 替换成你的实际验证逻辑

  return (
    <Route
      {...rest}
      render={(props) =>
        isTokenValid ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
};

export default PrivateRoute;

第二步：在App中使用PrivateRoute替换普通Route #

把所有需要登录才能访问的页面路由换成PrivateRoute，公开页面（比如登录页）用普通Route：

import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom';
import Login from './components/Login';
import Dashboard from './components/Dashboard';
import Profile from './components/Profile';
import PrivateRoute from './components/PrivateRoute';

class App extends Component {
  render() {
    const token = localStorage.getItem('access_token');
    return (
      <BrowserRouter>
        <Switch>
          {/* 公开路由：任何人都能访问 */}
          <Route path="/login" component={Login} />
          {/* 私有路由：必须有有效Token才能访问 */}
          <PrivateRoute path="/dashboard" component={Dashboard} />
          <PrivateRoute path="/profile" component={Profile} />
          {/* 根路径优化：有Token直接跳后台，无Token跳登录 */}
          <Redirect
            from="/"
            to={token ? "/dashboard" : "/login"}
            exact
          />
          {/* 所有未匹配的路由都重定向到登录页 */}
          <Redirect to="/login" />
        </Switch>
      </BrowserRouter>
    );
  }
}

补充细节 #

• 登录成功后存入Token：登录接口返回Token后，记得存入localStorage并跳转页面：

// Login组件中登录成功的逻辑
handleLogin = async () => {
  const response = await api.login(this.state.formData);
  if (response.success) {
    localStorage.setItem('access_token', response.data.token);
    this.props.history.push('/dashboard'); // 跳转到后台首页
  }
};

• 退出登录清除Token：退出时要移除Token并跳回登录：

// 比如在Header组件的退出按钮点击事件
handleLogout = () => {
  localStorage.removeItem('access_token');
  this.props.history.push('/login');
};

这样不管用户直接输入未授权的URL，还是Token过期/不存在，都会自动跳转到登录页，完美解决你的需求~

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