CODEWITHSUNDEEP
javascriptreactjsreact-router-dom
Emanuele
Emanuele

Reputation: 2394

Is it possible to use react-router-dom to dynamically navigate through different localhosts?

I have a web application that, for now, I am running via localhost:3002. In this web application I am using cards from reactstrap and on this card there is a Link I am importing from import { Link } from 'react-router-dom'; I am using this link to go to a specific detailed page of the application.

Question: I have in parallel another application running on localhost:5000 which is a login system. From the Link I have in the Card described, can I go to the other application whos localhost is 5000 using the button below "PROJECT SPECS"?

specs

Below the snippet of code:

import React from 'react';
import { Card, CardTitle, CardSubtitle, CardText, CardBody, CardImg } from 'reactstrap';
import { Link } from 'react-router-dom';

<CardTitle>
    <h3 className="thick">{ship.name}</h3>
</CardTitle>

<CardText>
    <h6>Project Details</h6>
    <p>For a description of the project view the specification included</p>
</CardText>
<div class="btn-toolbar">
    <Link to="/localhost:5000/login" className="btn btn-primary mr-3">
    Go to Specs
    </Link>
    <Link to={`/vessels/${ship.slug}`} className="btn btn-primary">
Go to vessels
</Link>
</div>

What I have done so far:

1) From this post I was able to properly set the react-router-dom and in fact is working properly.

2) I tried to link it to another localhost:5000 because when I linked it to a specific page already present on my app, that would have worked by simply typing <Link to="/localhost:5000/" className="btn btn-primary mr-3"> , unfortunately it didn't work.

3) I came across this too which was useful to understand how to navigate through pages but not through different localhost

Upvotes: 0

Views: 71

Answers (1)

Chris Brenberg
Chris Brenberg

Reputation: 142

react-router-dom's Link component is intended to link to routes WITHIN your application. To link externally, you can just use HTML 'a' tag: <a href="http://localhost:5000" className="btn btn-primary mr-3">

More information and other possible workarounds:

https://github.com/ReactTraining/react-router/issues/1147

Redirect to third party url using react-router-dom

Upvotes: 2

Related Questions