我想在我的项目中添加一个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
谢谢,
肯尼
答案 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