React Link添加不需要的/(React JS)

时间:2018-07-31 18:55:26

标签: javascript reactjs

我想在我的项目中添加一个Bootstrap标签。但是,当使用Link中的react-router-dom而不是a时,会引起问题。

<a href="#myID">DEMO</a>
<Link to="#myID">DEMO</Link>

在Chrome的控制台中检查后,我发现在ID之前添加了一个“ /”,这使该选项卡不起作用(我通过“ edit attribue”在控制台中手动删除了“ /”,并且可以正常工作),我可以知道如何解决这个问题吗?

(在控制台中)

Link: href="/#myID"
a: href="#myID"

Bootstrap 4选项卡: https://www.w3schools.com/bootstrap4/bootstrap_ref_js_tab.asp

谢谢,

肯尼

1 个答案:

答案 0 :(得分:0)

react-router的{​​{1}}组件旨在用于相对链接,因此它们必须插入这些斜杠以组成有效的URL。

要解决此问题,您需要使用绝对路径:

UPD ,使用路由器道具比使用全局变量更好:

Link

使用全局变量// props from `react-router`'s Route const Component = ({ location }) => ( // render stuff <Link to={location.pathname + '#myID'}>DEMO</Link> // render stuff ) // assuming routes similar to // ... <Route path="somepath" component={Componet} /> // ... 的初始答案代码:

document