嵌入Shopify的React组件React Router与站点JS冲突跳转如何解决？

问题核心原因 #

1. 你虽然导入了MemoryRouter，但没有实际用它包裹整个应用的路由结构，导致路由上下文失效
2. React Router默认的Link组件会渲染为原生a标签，被Shopify站点全局的ajax-cart.js.liquid绑定的a标签点击事件捕获，触发了站点的跳转逻辑
3. 跨包导入路由API（从react-router导入MemoryRouter，从react-router-dom导入Link）可能导致路由上下文不匹配

解决方案 #

1. 统一路由API导入并正确使用MemoryRouter #

MemoryRouter会将路由状态完全存储在内存中，不会修改浏览器地址栏，也不会触发页面跳转，完全和站点原生路由隔离。你需要统一从react-router-dom导入所有路由相关API，并用它包裹整个应用的路由结构：

import React from "react";
// 所有路由API统一从react-router-dom导入
import {
  Switch,
  Route,
  Redirect,
  MemoryRouter
} from "react-router-dom";
import axios from "axios";

export default class App extends React.Component {
  render() {
    return (
      {/* initialEntries设置组件内部初始路由，避免和站点路径冲突 */}
      <MemoryRouter initialEntries={['/widget']}>
        {/* 原来的路由逻辑 */}
        <Switch>
          <Route path="/widget/signin">
            {/* 登录页组件 */}
          </Route>
          <Route path="/widget/join">
            {/* 注册页组件 */}
          </Route>
          <Redirect exact from="/widget" to="/widget/home" />
        </Switch>
      </MemoryRouter>
    )
  }
}

2. 自定义Link组件阻止事件冒泡 #

站点全局JS监听了所有a标签的点击事件，所以需要给Link组件的点击事件阻止冒泡，避免被全局监听捕获：

import React from "react";
import { Link } from "react-router-dom";

// 自定义组件内部专用的Link，统一阻止事件冒泡
const WidgetLink = ({to, children, ...rest}) => {
  return <Link 
    to={to} 
    {...rest} 
    onClick={(e) => {
      e.stopPropagation();
      rest.onClick?.(e);
    }}
  >{children}</Link>
}

export function FooterGuest(){
  return (
    <div className="widget-footer widget-footer--login ">
      <h3 className="widget-footer-header ">
        Sign in to upload your own photo
      </h3>
      <div className="widget-footer__register-bar">
        <WidgetLink to="/widget/signin" className="ui inverted button" >Sign In</WidgetLink>
        <WidgetLink to="/widget/join" className="ui inverted button" >Join</WidgetLink>
      </div>
    </div>
  )
}

备选方案：完全不使用Link组件 #

如果还是存在冲突，可以直接使用编程式导航，用普通div/button渲染操作按钮，点击时调用路由跳转API，完全避免生成a标签：

import { useHistory } from "react-router-dom";

export function FooterGuest(){
  const history = useHistory();
  return (
    <div className="widget-footer widget-footer--login ">
      <h3 className="widget-footer-header ">
        Sign in to upload your own photo
      </h3>
      <div className="widget-footer__register-bar">
        <button 
          className="ui inverted button"
          onClick={() => history.push('/widget/signin')}
        >Sign In</button>
        <button 
          className="ui inverted button"
          onClick={() => history.push('/widget/join')}
        >Join</button>
      </div>
    </div>
  )
}

类组件可以通过withRouter高阶组件获取history对象实现相同效果。

如果需要刷新后保留组件路由状态 #

可以用HashRouter代替MemoryRouter，设置basename隔离路由空间，hash变化不会触发页面加载，也不会和站点原生路由冲突：

<HashRouter basename="/widget">
  {/* 路由内容不变 */}
</HashRouter>

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