重定向不会重写 URL

Question

我在 visual studio 中有一个 ASP.net 核心项目与 React。在导航栏上，我有一个 link 用于 Twitter。

<ul className="navbar-nav flex-grow">
   <NavItem>
      <NavLink tag={Link} className="TwitterLogo" to="https://twitter.com/"><img src={SMtwitter} 
       className="SMicon" alt="TwitterLogo" color="white" /></NavLink>
   </NavItem>

link只是在URL上添加到当前页面，并没有删除或重写现有的URL。

Answer 1

NavLinks 是 react-router 特定的元素，应该只用于 link 您应用的其他部分。对于外部 links 你应该使用 <a href=""></a>.

// a normal-looking, HTML-style a tag:
<a href="https://www.example.com">Click Here!</a>

// some kind of Link component, provided by React/Reach Router, Gatsby, etc
<Link to="/example">Click Here!</Link>

如果link连接到不属于您的 React 的外部页面应用程序，使用标签 link.
如果link在您的应用中转到另一个URL，请使用零件。这将（取决于您使用的路由库）最终仍会呈现语义上有效的标签，但不会刷新页面并为您提供额外的道具选项超级方便（查看路由库的文档了解详情）。

Answer 2

使用 react-router-dom 的目的是通过在 DOM 中进行更改而不是重新加载整个页面来导航到应用程序路由。此场景适用于内部链接。

当进入外部链接时。它不是我们应用程序的一部分。我们无法在我们的应用程序上下文中呈现它。因此，解决方案是对外部链接使用 a 标签。

<ul className="navbar-nav flex-grow">
   <NavItem>
      <a className="TwitterLogo" href="https://twitter.com/">
        <img src={SMtwitter} className="SMicon" alt="TwitterLogo" color="white" />
      </a>
   </NavItem> 
</ul>

重定向不会重写 URL

Redirect doesn't rewrite URL

nav

reactjs

react-router-dom