在react-router 4中使用锚标签 [英] Using anchor tags in react-router 4

问题描述

当用户通过锚链接导航时，我希望页面向下滚动到我的锚标签。

I want the page to scroll down to my anchor tags when a user navigates to it through an anchor link.

我正在使用react-router 4和I已定义的内容如下：

I'm using react-router 4 and I've defined things as follows:

navbar：

export default (props) => {
  const { 
    updateModal,
    updateRoute,
  } = props
  return(
    <Navbar fluid collapseOnSelect>
      <Nav>
        <NavDropdown eventKey="4" title="Solutions" id="nav-dropdown" noCaret>
          <MenuItem eventKey="4.1">
             <Link to='/solution#ipos'>TESTING ANCHOR</Link>
          </MenuItem>
...

某些路线：

export default class extends Component {
  constructor() {
    super()
    this.state = {
      isLoading: true
    }
  }
  render() {
    return (
      <Grid className='solutions' fluid>
       <Row className='someClass'>
        <div>
          <h2><a href='ipos' id='ipos'>Ipos morna santos paros</a></h2>
          ...

我可以看到哈希值当我点击navebar中的锚点链接时，在URL和我的redux商店中的chor标签，它确实导航到新路线，但它不会向下滚动到标签本身。

I can see the hash anchor tag in the url and in my redux store when I click on the anchor link in the navebar, and it indeed navigates to the new route, but it doesn't scroll down to the tag itself.

我是否可以创建滚动功能或它应该如何正常工作？

Is it up to me to create the scroll function or how is it supposed to work exactly?

推荐答案

这是反应路由器的已知问题。 （ https://github.com/ReactTraining/react-router/issues/ 394＃issuecomment-220221604 ）

It is a known issue with react router. (https://github.com/ReactTraining/react-router/issues/394#issuecomment-220221604)

还有一个解决方案。 https://www.npmjs.com/package/react-router-hash-link 此软件包解决了这个问题。

There is a solution as well. https://www.npmjs.com/package/react-router-hash-link this package solves the issue.

你必须使用这个哈希链接作为链接如下所示。

You have to use this Hash Link as the Link like below.

从'react-router-hash-link导入{HashLink as Link} ';

这篇关于在react-router 4中使用锚标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！