Styled Component结合Link跳转异常：地址栏更新但页面未刷新

以下是几种常见的排查和解决方法：

1. 确保应用已包裹在路由上下文组件中 #

你的整个React应用必须被BrowserRouter（或HashRouter）包裹，否则Link组件无法触发路由的视图更新。在项目入口文件（如index.js）中检查配置：

import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

2. 验证路由配置的正确性 #

根据你使用的react-router-dom版本，确认路由匹配规则是否正确：

• v6版本：路由需使用element属性指定渲染组件，默认采用模糊匹配（无需exact）：

  import { Routes, Route } from 'react-router-dom';
  
  function App() {
    return (
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/your-target-path" element={<TargetComponent />} />
      </Routes>
    );
  }
  

• v5版本：如需精确匹配，需添加exact属性：

  import { Switch, Route } from 'react-router-dom';
  
  function App() {
    return (
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/your-target-path" component={TargetComponent} />
      </Switch>
    );
  }
  

3. 检查是否存在阻止默认行为的代码 #

确认组件或父组件中没有通过onClick事件调用e.preventDefault()，这会阻断Link的默认跳转逻辑。

4. 替代方案：使用useNavigate手动跳转 #

如果styled包裹Link存在兼容性问题，可改用普通容器组件结合useNavigate钩子实现跳转：

/* eslint-disable */
import { useNavigate } from 'react-router-dom';
import styled from 'styled-components';

const Element = ({ el }) => {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate(el.url);
  };

  return el?.url ? (
    <Container onClick={handleClick}>
      <div className={`sidenav-el ${el.current ? 'current' : ''}`}>
        <div className="img-container">
          <img src={el.img} />
        </div>
        <span className="title">{el.title}</span>
      </div>
    </Container>
  ) : (
    <></>
  );
};

export default Element;

const Container = styled.div`
  cursor: pointer;
  color: var(--cMain);
  text-decoration: none;

  &:hover {
    color: var(--cMain);
  }

  .sidenav-el {
    width: 100%;
    text-align: center;
    padding: 10% 0;
    position: relative;

    .img-container {
      position: relative;
      margin: auto;
      width: 70%;
      border: 2px solid var(--cMain);

      img {
        width: 100%;
      }
    }

    span {
      display: block;
      font-size: 1rem;
      margin-top: 0.5rem;
      font-weight: bold;
    }

    &.current {
      .img-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 5px solid var(--cMain);
      }
    }
  }
`;

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