在 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'm using react-router 4 and I've defined things as follows:

导航栏:

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 商店中看到哈希锚标记，并且它确实导航到新路由，但它不会向下滚动到标记本身.

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?

推荐答案

这是 react router 的一个已知问题.(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.

你必须使用这个Hash Link作为Link，如下所示.

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

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

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