在react.js中准备好文档后触发react-router

Question

我正在使用react-router 4.0，路由依赖于DOM中某些元素的定位。除非用户直接转到localhost / apple或localhost / pear，否则这样可以正常工作。这是因为路由在DOM加载之前想要发挥它的魔力。

如何在加载DOM后触发路由？

这是我的代码：

import React, { Component } from 'react'
import './App.css'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

var Scroll = require('react-scroll')  

const Child = ({ match }) => (
<div>
{     Scroll.animateScroll.scrollTo(document.getElementById(match.params.id).getBoundingClientRect().top)
}
</div>
)

class App extends Component {
render() {
return (
  <div>
    <Router>
      <div>
        <h2>Demo</h2>
        <ul>
          <li><Link to="/apple">Apple</Link></li>
          <li><Link to="/pear">Pear</Link></li>
        </ul>
        <Route path="/:id" component={Child}/>
      </div>
    </Router>

    <div id="apple" style={{backgroundColor: 'red', height: '100vh'}}>
    Apple
    </div>

    <div id="pear" style={{backgroundColor: 'blue', height: '100vh'}}>
    Pear
    </div>

    </div>

   );
  }

}

export default App;

ps：我正在做出我的第一个婴儿步骤，所以请你好一点：）

Answer 1

你不应该在你的渲染函数中做scrollTo的东西。这就是componentDidMount的用途。试试这段代码，

class Child extends React.component {
  componentDidMount () {
    return Scroll.animateScroll.scrollTo(document.getElementById(this.props.match.params.id).getBoundingClientRect().top)
  }
  render () {
    return null
  }
}

话虽如此，我并不认为您需要React Router，因为您只是在同一页面上滚动。