React中<Redirect>跳转后页面未加载，如何实现自动刷新？

我明白你现在的困扰——React Router的<Redirect>默认是单页路由跳转，只会修改URL而不会触发整页刷新，所以才会出现URL变了但组件没加载的情况，手动刷新才正常对吧？下面给你几个可行的解决思路：

方法一：直接用window.location.href触发整页跳转 #

这是最直接的方式，因为window.location.href会向服务器发起请求，自然会刷新页面并加载组件。你可以写一个专门的跳转组件：

import { useEffect } from 'react';

const HomeRedirect = () => {
  useEffect(() => {
    // 直接跳转到dashboard并触发刷新
    window.location.href = '/dashboard';
  }, []);

  return null; // 不需要渲染任何内容
};

// 然后修改路由配置
<Route exact path='/' component={HomeRedirect} />

方法二：排查组件是否响应路由变化 #

如果不想整页刷新，那可能是你的Dashboard组件没有正确响应路由变化。可以通过以下方式调整：

• 用useLocation钩子监听路由变化，确保组件重新渲染：

import { useLocation } from 'react-router-dom';

const Dashboard = () => {
  const location = useLocation();

  // 把location作为依赖，路由变化时重新执行副作用
  useEffect(() => {
    // 这里可以写Dashboard的初始化逻辑
    console.log('路由变化，重新加载Dashboard');
  }, [location]);

  return <div>你的Dashboard内容</div>;
};

• 检查路由配置是否正确，确保Dashboard的路由被正确定义：

// 确保你的路由配置里有这条
<Route path='/dashboard' component={Dashboard} />

方法三：集成window.location.reload()（不推荐，偏hack） #

如果你一定要用<Redirect>再加刷新，可以在Dashboard组件挂载时判断来源并刷新，但这种方法容易出现无限刷新的问题，谨慎使用：

import { useEffect, useLocation } from 'react-router-dom';

const Dashboard = () => {
  const location = useLocation();

  useEffect(() => {
    // 判断是否从根路径跳转过来
    if (document.referrer === window.location.origin + '/') {
      window.location.reload();
    }
  }, [location]);

  return <div>你的Dashboard内容</div>;
};

// 路由配置还是用你的Redirect
<Route exact path='/' render={()=><Redirect to='/dashboard'/>} />

为什么<Redirect push>没用？ #

<Redirect push>只是把新的路由加入浏览器历史栈，不会改变单页跳转的本质，所以还是不会触发整页刷新，自然解决不了组件不加载的问题。

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