由于与站点 Javascript 冲突，React Router 导致页面重定向

Question

我有一个基于 React.js 的小部件，已嵌入到 shopify 网站。它适用于大多数网站。

对于一个站点，ajax-cart.js.liquid 代码导致 react 路由器出现问题，页面 url 发生变化，托管小部件的页面加载该 url - 导致 404。

如何隔离 React 应用程序和路由器功能，使其不被页面 js 破坏或接管？

在这里您可以看到它正常工作。单击右下角的 P，然后单击加入。 https://www.puctto.me/collections/all

在这里你可以看到它不起作用。单击 P。 url 栏发生变化，页面导航。 https://shoezie.com.au/

我正在像这样加载 ReactRouter：

import React from "react";
import {
  Switch,
  Route,
  Redirect
} from "react-router-dom";
import { MemoryRouter } from 'react-router'
import axios from "axios";

export default class App extends React.Component {
 //app code
}

然后在我的 FooterGuest 组件中，我使用了来自 react-router 的链接

import React from "react";
import {
  // BrowserRouter as Router,
  // Switch,
  // Route,
  Link
} from "react-router-dom";

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">
        
        <Link to="/signin" className="ui inverted button" >Sign In</Link>
        <Link to="/join" className="ui inverted button" >Join</Link>
      </div>
    </div>
  )
}

Answer 1

你可以尝试添加这个来防止重定向：

export function FooterGuest(){

 const stopPropagation = (e)=>{
        e.stopPropagation()
    }
  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">
        
        <Link to="/signin" className="ui inverted button" onClick={stopPropagation} >Sign In</Link>
        <Link to="/join" className="ui inverted button" onClick={stopPropagation} >Join</Link>
      </div>
    </div>
  )
}