Ufdjrw

Why doesn't the university give past final exams' answers?

All ASCII characters with a given bit count

What does the black goddess statue do and what is it?

Are there existing rules/lore for MTG planeswalkers?

In search of the origins of term censor, I hit a dead end stuck with the greek term, to censor, λογοκρίνω

What's the difference between using dependency injection with a container and using a service locator?

France's Public Holidays' Puzzle

How long can a nation maintain a technological edge over the rest of the world?

false 'Security alert' from Google - every login generates mails from 'no-reply@accounts.google.com'

Why does Java have support for time zone offsets with seconds precision?

What to do with someone that cheated their way though university and a PhD program?

How would it unbalance gameplay to rule that Weapon Master allows for picking a fighting style?

What were wait-states, and why was it only an issue for PCs?

How did Elite on the NES work?

What is the ongoing value of the Kanban board to the developers as opposed to management

Why did Europeans not widely domesticate foxes?

Retract an already submitted Recommendation Letter (written for an undergrad student)

Writing a T-SQL stored procedure to receive 4 numbers and insert them into a table

Co-worker works way more than he should

Where to find documentation for `whois` command options?

My admission is revoked after accepting the admission offer

Will I be more secure with my own router behind my ISP's router?

Test if all elements of a Foldable are the same

How would you suggest I follow up with coworkers about our deadline that's today?

Link does not take to the correct URL in reactjs

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

2

I am learning Reactjs, and there is a problem when I try to use Link to go to external websites.

<Link to=repo.html_url>
repo.name
</Link>

Let's say the repo.html_url is
https://github.com/ningmeng7998/SmartER-Project-Android-Frontend.

Instead of taking me to this URL, it takes me to http://localhost:3000/profile/https://github.com/ningmeng7998/SmartER-Project-Android-Frontend, which adds localhost in front of it.

How to solve this problem?

javascript reactjs react-router

share|improve this question

edited Mar 9 at 7:28

Bruno Ely

488417

asked Mar 9 at 4:44

NingNing

203

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The primary way to allow users to navigate around your application
  
  – Maheer Ali
  Mar 9 at 4:46
  

  
  
  
  

add a comment | 

2

I am learning Reactjs, and there is a problem when I try to use Link to go to external websites.

<Link to=repo.html_url>
repo.name
</Link>

Let's say the repo.html_url is
https://github.com/ningmeng7998/SmartER-Project-Android-Frontend.

Instead of taking me to this URL, it takes me to http://localhost:3000/profile/https://github.com/ningmeng7998/SmartER-Project-Android-Frontend, which adds localhost in front of it.

How to solve this problem?

javascript reactjs react-router

share|improve this question

edited Mar 9 at 7:28

Bruno Ely

488417

asked Mar 9 at 4:44

NingNing

203

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The primary way to allow users to navigate around your application
  
  – Maheer Ali
  Mar 9 at 4:46
  

  
  
  
  

add a comment | 

I am learning Reactjs, and there is a problem when I try to use Link to go to external websites.

<Link to=repo.html_url>
repo.name
</Link>

Let's say the repo.html_url is
https://github.com/ningmeng7998/SmartER-Project-Android-Frontend.

Instead of taking me to this URL, it takes me to http://localhost:3000/profile/https://github.com/ningmeng7998/SmartER-Project-Android-Frontend, which adds localhost in front of it.

How to solve this problem?

javascript reactjs react-router

share|improve this question

edited Mar 9 at 7:28

Bruno Ely

488417

asked Mar 9 at 4:44

NingNing

203

<Link to=repo.html_url>
repo.name
</Link>

share|improve this question

edited Mar 9 at 7:28

Bruno Ely

488417

asked Mar 9 at 4:44

NingNing

203

share|improve this question

edited Mar 9 at 7:28

Bruno Ely

488417

asked Mar 9 at 4:44

NingNing

203

edited Mar 9 at 7:28

Bruno Ely

488417

edited Mar 9 at 7:28

Bruno Ely

488417

asked Mar 9 at 4:44

NingNing

203

asked Mar 9 at 4:44

NingNing

203

2 Answers
2

active

oldest

votes

2

I'm assuming you're using React Router's Link component, as it is not part of vanilla React.

Currently, React Router Links do not support external URLs, they're just for navigating internally in your app. You'll want to use a standard HTML anchor tag. Try this:

<a href=repo.html_url>repo.name</a>

There's some discussion going on around the issue of Links supporting external URLs going on here if you'd like to learn more or stay in the loop.

Another solution is to implement your own wrapper around Link that handles the logic (and in the end spits out a <Link> component for internal routes or <a> tag for external URLs).

share|improve this answer

answered Mar 9 at 4:54

Bruno ElyBruno Ely

488417

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  That's why. Got it. Thanks a lot!
  
  – Ning
  Mar 9 at 5:02
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @Ning consider accepting as answer if something solved your problem
  
  – Code Maniac
  Mar 9 at 5:12
  

  
  
  
  

add a comment | 

1

For external links, just use a tag! as <Link> is only used for internal routes. As you can see in the docs that React Router themselves used a tags for an external link instead of Link.

<a href=repo.html_url>
repo.name
</a>

share|improve this answer

answered Mar 9 at 4:53

Vaibhav MuleVaibhav Mule

3,14112546

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55074063%2flink-does-not-take-to-the-correct-url-in-reactjs%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

2

I'm assuming you're using React Router's Link component, as it is not part of vanilla React.

Currently, React Router Links do not support external URLs, they're just for navigating internally in your app. You'll want to use a standard HTML anchor tag. Try this:

<a href=repo.html_url>repo.name</a>

There's some discussion going on around the issue of Links supporting external URLs going on here if you'd like to learn more or stay in the loop.

Another solution is to implement your own wrapper around Link that handles the logic (and in the end spits out a <Link> component for internal routes or <a> tag for external URLs).

share|improve this answer

answered Mar 9 at 4:54

Bruno ElyBruno Ely

488417

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  That's why. Got it. Thanks a lot!
  
  – Ning
  Mar 9 at 5:02
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @Ning consider accepting as answer if something solved your problem
  
  – Code Maniac
  Mar 9 at 5:12
  

  
  
  
  

add a comment | 

2

I'm assuming you're using React Router's Link component, as it is not part of vanilla React.

Currently, React Router Links do not support external URLs, they're just for navigating internally in your app. You'll want to use a standard HTML anchor tag. Try this:

<a href=repo.html_url>repo.name</a>

There's some discussion going on around the issue of Links supporting external URLs going on here if you'd like to learn more or stay in the loop.

Another solution is to implement your own wrapper around Link that handles the logic (and in the end spits out a <Link> component for internal routes or <a> tag for external URLs).

share|improve this answer

answered Mar 9 at 4:54

Bruno ElyBruno Ely

488417

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  That's why. Got it. Thanks a lot!
  
  – Ning
  Mar 9 at 5:02
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @Ning consider accepting as answer if something solved your problem
  
  – Code Maniac
  Mar 9 at 5:12
  

  
  
  
  

add a comment | 

I'm assuming you're using React Router's Link component, as it is not part of vanilla React.

Currently, React Router Links do not support external URLs, they're just for navigating internally in your app. You'll want to use a standard HTML anchor tag. Try this:

<a href=repo.html_url>repo.name</a>

There's some discussion going on around the issue of Links supporting external URLs going on here if you'd like to learn more or stay in the loop.

Another solution is to implement your own wrapper around Link that handles the logic (and in the end spits out a <Link> component for internal routes or <a> tag for external URLs).

share|improve this answer

answered Mar 9 at 4:54

Bruno ElyBruno Ely

488417

<a href=repo.html_url>repo.name</a>

share|improve this answer

answered Mar 9 at 4:54

Bruno ElyBruno Ely

488417

answered Mar 9 at 4:54

Bruno ElyBruno Ely

488417

answered Mar 9 at 4:54

Bruno ElyBruno Ely

488417

1

For external links, just use a tag! as <Link> is only used for internal routes. As you can see in the docs that React Router themselves used a tags for an external link instead of Link.

<a href=repo.html_url>
repo.name
</a>

share|improve this answer

answered Mar 9 at 4:53

Vaibhav MuleVaibhav Mule

3,14112546

add a comment | 

1

For external links, just use a tag! as <Link> is only used for internal routes. As you can see in the docs that React Router themselves used a tags for an external link instead of Link.

<a href=repo.html_url>
repo.name
</a>

share|improve this answer

answered Mar 9 at 4:53

Vaibhav MuleVaibhav Mule

3,14112546

add a comment | 

For external links, just use a tag! as <Link> is only used for internal routes. As you can see in the docs that React Router themselves used a tags for an external link instead of Link.

<a href=repo.html_url>
repo.name
</a>

share|improve this answer

answered Mar 9 at 4:53

Vaibhav MuleVaibhav Mule

3,14112546

<a href=repo.html_url>
repo.name
</a>

share|improve this answer

answered Mar 9 at 4:53

Vaibhav MuleVaibhav Mule

3,14112546

answered Mar 9 at 4:53

Vaibhav MuleVaibhav Mule

3,14112546

answered Mar 9 at 4:53

Vaibhav MuleVaibhav Mule

3,14112546