相关疑难解决方法(0)

如何使用react-router,并将链接导航到特定页面上的特定位置？(例如/home-page#section-three)

细节:

我正在使用react-router我的React应用程序.

我有一个站点范围的导航栏,需要链接到页面的特定部分,如/home-page#section-three.

因此,即使您在说/blog,单击此链接仍将加载主页,第三部分滚动到视图中.这正是标准的<a href="/home-page#section-three>运作方式.

注意:react-router的创建者没有给出明确的答案.他们说它正在进行中,并且同时使用其他人的答案.我会尽力保持这个问题的最新进展和可能的解决方案,直到出现主导的问题.

研究:

如何使用反应路由器的普通锚链接

这个问题是从2015年(所以10年前的反应时间).最受欢迎的答案是用来HistoryLocation代替HashLocation.基本上这意味着将位置存储在窗口历史记录中,而不是存储在哈希片段中.

坏消息是......即使使用HistoryLocation(大多数教程和文档在2016年所说的内容),锚标签仍然不起作用.

https://github.com/ReactTraining/react-router/issues/394

ReactTraining上的一个线程,关于如何使用anchor链接与react-router.这是没有确认的答案.要小心,因为大多数建议的答案都已过时(例如使用"哈希"道具<Link>)

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

我正在使用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>
          ...

当我点击navebar中的锚链接时,我可以在url和我的redux商店中看到哈希锚标记,它确实导航到新路由,但它不会向下滚动到标记本身.

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