CODEWITHSUNDEEP
asp.netreactjs
Eval Knievel
Eval Knievel

Reputation: 362

React Router link to non React page in application

I have a web application written in asp.net. I have been writing a react application to sit on a page in this application using web methods to send data back and forwards. It is working great and I am just doing the last couple of bits.

The routing is set out so that any page with a react app on it will use the url and route in the appropriate component.

I want to have links in these react components that link off to other non react pages in the application.

The problem is that this application might sit in a virtual directory in IIS, so the react app needs to know the app domain virtual path. I have cheated a little bit and got the asp.net app to write out the current app domain virtual path to a hidden field, which is then picked it up with javascript and fed into the basename of the browser router. This seemed to work really well, it generated the links with the virtual directory, so the "to" property of the link was turned from /NonReactPage.aspx into https://domain/ThisSite/NonReactPage.aspx. All is good, when I right click or middle mouse and open the link in a new tab it goes to the right page.

The problem is that when it click it normally staying on the same tab, the react app tries to route it like its another component, finds no routing for that URL and shows nothing on the screen.

I need it to:

N.B. Im sorry, i could not get this snippet to run properly in the code snippet thing, i get this message like "Script error." I cant figure out how to fix it. (Im quite new to react as you might have guessed!). Hopefully there is enough information here that you might be able to answer

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>

Upvotes: 2

Views: 1737

Answers (1)

Prateek Thapa
Prateek Thapa

Reputation: 4938

Just use an anchor tag. The Link from react-router is for Single-Page Application, underneath the hood if prevents the page from refreshing itself.

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

A universal anchor will also do.

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

Upvotes: 4

Related Questions