trigger react-router after document is ready in react.js

Question

i am using react-router 4.0 and the routing depends on the positioning of certain elements within the DOM. this works fine unless the user goes directly to localhost/apple or localhost/pear. this is because the routing wants to do its magic before the DOM has loaded.

how can i trigger the routing after the DOM has loaded?

here is my code:

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: i am just making my first baby steps with react so please be nice :)

Could you use the componentDidMount lifecycle method (you'll have to use a full class instead of a stateless function) to trigger the scrolling? — Tyler Sebastian
– Tyler Sebastian, Commented Mar 16, 2017 at 21:21

Tyler McGinnis · Accepted Answer · 2017-03-17 02:51:55Z

1

You shouldn't be doing scrollTo stuff inside of your render function. That's what componentDidMount is for. Try this code,

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

With that said, I don't really think you need React Router for this as you're just scrolling on the same page.

answered Mar 17, 2017 at 2:51

Tyler McGinnis

35.4k16 gold badges75 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nerdess Over a year ago

thanks a lot, this was the nudge i needed, already understanding react a bit better now :) used componentWillReceiveProps() if the user clicks on a link and compenendDidMount() if the user goes to a path directly via the url. btw: i think i do need react router because i want the links to look like proper url's in the browser and not just be anchors.

nerdess Over a year ago

sorry i meant componentDidUpdate() instead of componentWillReceiveProps()

Collectives™ on Stack Overflow

trigger react-router after document is ready in react.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related