J'ai une application Web écrite en asp.net. J'ai écrit une application de réaction pour s'asseoir sur une page de cette application en utilisant des méthodes Web pour envoyer des données dans les deux sens. Cela fonctionne très bien et je ne fais que les deux derniers bits.

Le routage est défini de sorte que toute page contenant une application de réaction utilise l'URL et la route dans le composant approprié.

Je veux avoir des liens dans ces composants réactifs qui renvoient à d'autres pages non réactives de l'application.

Le problème est que cette application peut se trouver dans un répertoire virtuel dans IIS, donc l'application de réaction doit connaître le chemin virtuel du domaine de l'application. J'ai un peu triché et j'ai demandé à l'application asp.net d'écrire le chemin virtuel du domaine d'application actuel vers un champ caché, qui est ensuite récupéré avec javascript et introduit dans le nom de base du routeur du navigateur. Cela semblait très bien fonctionner, cela générait les liens avec le répertoire virtuel, donc la propriété "to" du lien a été transformée de /NonReactPage.aspx en https://domain/ThisSite /NonReactPage.aspx. Tout va bien, lorsque je clique avec le bouton droit de la souris ou du milieu de la souris et que j'ouvre le lien dans un nouvel onglet, il va à la bonne page.

Le problème est que lorsqu'elle clique dessus en restant normalement sur le même onglet, l'application React essaie de l'acheminer comme son autre composant, ne trouve aucun routage pour cette URL et n'affiche rien à l'écran.

J'en ai besoin pour:

  • Sortez de l'application de réaction et passez à l'autre page comme s'il s'agissait d'un lien normal
  • Utilisez le chemin virtuel que j'ai fourni pour que cette application asp.net puisse s'installer à n'importe quel niveau sur un serveur Web
  • Je voudrais définir ce chemin virtuel dans un seul endroit de haut niveau afin que je n'aie pas à le transmettre à chaque composant vers lequel je route.

N.B. Je suis désolé, je n'ai pas pu faire fonctionner cet extrait correctement dans l'extrait de code, je reçois ce message du type "Erreur de script". Je n'arrive pas à comprendre comment le réparer. (Je suis assez nouveau pour réagir comme vous l'avez peut-être deviné !). J'espère qu'il y a suffisamment d'informations ici pour que vous puissiez répondre

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>
2
EvalKeneval 4 sept. 2020 à 14:15

1 réponse

Meilleure réponse

Utilisez simplement un anchor tag. Le lien de react-router est destiné à une application à page unique, sous le capot s'il empêche la page de se rafraîchir.

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

Une ancre universelle fera également l'affaire.

function UniversalAnchor({ path }) {
  return <a href=`domain/thisGlobal/${path}` />
}
2
Prateek Thapa 14 sept. 2020 à 08:36