在react-router 4中使用锚标签

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

我正在使用react-router 4，我的定义如下：

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>
          ...

当我单击导航栏中的锚链接时，我可以在 url 和 redux 存储中看到哈希锚标签，它确实导航到新路线，但它不会向下滚动到标签本身。

由我来创建滚动功能还是它应该如何准确工作？

要向下滚动到锚标记，您需要安装React 路由器哈希链接, with:

npm install --save react-router-hash-link

然后导入哈希链接：

import { HashLink as Link } from 'react-router-hash-link';

然后使用Hash Link，例如：

<Link to="/pathLink#yourAnchorTag">Your link text</Link>

在目标组件处，例如：

<div id= "yourAnchorTag">
      <p>Linked to here<p>
</div>