在react-router 4中使用定位标记

Question

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

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

导航栏：

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存储中看到哈希定位标签，它确实导航到新路线，但不会向下滚动到标签本身。

是由我来创建滚动功能还是应该如何正常工作？

Answer 1

这是React Router的已知问题。（https://github.com/ReactTraining/react-
router/issues/394#issuecomment-220221604
）

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

你必须使用这个Hash Link作为Link像下面。

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