React Router Hash Router不渲染视图求助：URL变化需刷新才显示

Hey there！我之前在React/Redux项目里切换到Hash Router时也碰到过一模一样的问题，咱们来逐个排查可能的遗漏点：

1. Redux连接的组件未监听路由变化 #

这是最常见的原因——当你用connect包裹组件时，如果没有把路由的location对象纳入组件的依赖，Redux会认为组件的状态没有变化，从而跳过重渲染。

解决方案： #

• 方法一：在mapStateToProps中注入location
  利用connect的第二个参数ownProps获取路由传递的location，并将其作为组件的props返回：

  const mapStateToProps = (state, ownProps) => {
    return {
      // 你的其他状态映射
      location: ownProps.location
    };
  };
  
  export default connect(mapStateToProps)(YourComponent);
  

• 方法二：用withRouter高阶组件包裹
  如果不想修改mapStateToProps，可以用react-router-dom提供的withRouter把路由props注入到Redux连接的组件中：

  import { withRouter } from 'react-router-dom';
  import { connect } from 'react-redux';
  
  // 先connect再用withRouter包裹
  export default withRouter(connect(mapStateToProps)(YourComponent));
  

• 函数组件用useLocation Hook
  如果你用的是函数组件，直接用useLocation就能自动监听路由变化：

  import { useLocation } from 'react-router-dom';
  
  function YourComponent() {
    const location = useLocation();
    // location变化时组件会自动重渲染
    return <div>当前路径：{location.pathname}</div>;
  }
  

2. 路由配置未正确使用Switch #

如果你的路由没有用Switch包裹，可能会出现多个路由同时匹配的情况，导致UI没有正确切换。确保你的路由结构是这样的：

import { HashRouter as Router, Switch, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        {/* 其他路由规则 */}
      </Switch>
    </Router>
  </Provider>,
  document.getElementById('root')
);

Switch会确保只渲染第一个匹配的路由，避免路由冲突导致的UI异常。

3. 错误的路由跳转方式 #

如果你是直接通过原生JS修改window.location.hash来跳转路由，React Router无法感知到这个变化，自然不会触发UI重渲染。必须使用React Router提供的跳转方式：

• 用Link组件跳转：

  import { Link } from 'react-router-dom';
  
  <Link to="/about">关于我们</Link>
  

• 函数组件用useHistory Hook跳转：

  import { useHistory } from 'react-router-dom';
  
  function YourComponent() {
    const history = useHistory();
    const goToAbout = () => history.push('/about');
    return <button onClick={goToAbout}>去关于页</button>;
  }
  

• 类组件通过props.history跳转：

  class YourComponent extends React.Component {
    goToAbout = () => this.props.history.push('/about');
    render() {
      return <button onClick={this.goToAbout}>去关于页</button>;
    }
  }
  

4. Redux状态未随路由更新 #

如果你的组件依赖的Redux状态需要根据路由参数更新（比如根据/:id加载对应数据），要确保在路由变化时触发对应的action来更新状态。可以在组件的componentDidUpdate（类组件）或者useEffect（函数组件）中监听location变化：

// 函数组件示例
import { useLocation, useEffect } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { fetchData } from './actions';

function YourComponent() {
  const location = useLocation();
  const dispatch = useDispatch();

  useEffect(() => {
    // 路由变化时重新请求数据
    const id = new URLSearchParams(location.search).get('id');
    if (id) dispatch(fetchData(id));
  }, [location, dispatch]); // 依赖location，变化时触发
}

先从这几个点排查，应该能解决你的问题～

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