当用户通过锚链接导航到页面时,我希望页面向下滚动到锚标记。
我正在使用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存储中看到哈希定位标签,它确实导航到新路线,但不会向下滚动到标签本身。
是由我来创建滚动功能还是应该如何正常工作?
这是React Router的已知问题。(https://github.com/ReactTraining/react- router/issues/394#issuecomment-220221604)
还有一个解决方案。https://www.npmjs.com/package/react-router-hash- link此软件包可以解决该问题。
你必须使用这个Hash Link作为Link像下面。
Hash Link
Link
import { HashLink as Link } from 'react-router-hash-link';