asp.net - React Router 链接到应用程序中的非 React 页面

Question

我有一个用asp.net 编写的Web 应用程序。我一直在编写一个 React 应用程序，以使用 Web 方法来发送和转发数据，以位于该应用程序中的页面上。它工作得很好，我只是在做最后几位。
路由是这样设置的，任何带有 React 应用程序的页面都将使用相应组件中的 url 和路由。
我希望在这些 react 组件中有链接到应用程序中的其他非 react 页面。
问题是该应用程序可能位于 IIS 中的虚拟目录中，因此 React 应用程序需要知道应用程序域虚拟路径。我有点作弊，让 asp.net 应用程序写出当前应用程序域虚拟路径到隐藏字段，然后用 javascript 获取它并输入浏览器路由器的基本名称。这似乎工作得很好，它生成了与虚拟目录的链接，因此链接的“to”属性从 变成了/NonReactPage.aspx 进入 https://domain/ThisSite/NonReactPage.aspx .一切都很好，当我右键单击或鼠标中键并在新选项卡中打开链接时，它会转到正确的页面。
问题是，当它通常停留在同一个选项卡上单击它时，react 应用程序会尝试像它的另一个组件一样路由它，但找不到该 URL 的路由并且在屏幕上什么也没有显示。
我需要它:

跳出 react 应用程序并跳转到另一个页面，就好像它是一个常规链接

使用我提供的虚拟路径，以便此 asp.net 应用程序可以位于网络服务器上的任何级别

我想将这个虚拟路径设置在一个高级位置，这样我就不必将它传递给我路由到的每个组件。

注意抱歉，我无法在代码片段中正确运行此片段，我收到类似“脚本错误”的消息。我不知道如何修复它。 (我很新，你可能已经猜到了!)。希望这里有足够的信息，您可以回答

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, HashRouter, Link } from 'react-router-dom';
import { Route } from 'react-router';

const rootElement = document.getElementById('MyReactApp');
const sitePath = document.getElementById('SitePath');

export class MyAquinasReactApp extends Component {

    render() {
        return (
            <div>
                <Route path='/APageThatUsesReact.aspx' component={SomeComponent} />
                <Route path='/ASubFolder/AnotherPageThatUsesReact.aspx' component={AnotherComponent} />
            </div>
        )
    }
}

if (rootElement) {
    ReactDOM.render(

        <BrowserRouter basename={sitePath.value}>
            <MyAquinasReactApp />
        </BrowserRouter>,
        rootElement);
}

export class SomeComponent extends Component {

  render() {
  return 
    <div>
      <div>This is the content of the component</div>
      <Link to="/NonReactPage.aspx"> this is a link to a non react page in the application</Link
    </div>
  }

export class AnotherComponent extends Component {

  render() {
  return 
    <div>
      <div>This is another componenet, it doesn't have any links and is only here to illustrate the routing setup</div>
    </div>
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<input type="hidden" id="SitePath" value="/ThisApp/" />

<div class="MyReactApp"></div>

Answer 1

只需使用 anchor tag .
来自 react-router 的链接用于单页应用程序，如果阻止页面自身刷新，则在引擎盖下。

<a href="/APageThatUsesReact.aspx' />

通用 anchor 也可以。

function UniversalAnchor({ path }) {
  return <a href=`domain/thisGlobal/${path}` />
}