小编典典

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

reactjs

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

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

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


阅读 234

收藏
2020-07-22

共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';

2020-07-22