[solved] Meteor authentication and react-router

help
1

How do I get meteor to re-render my components when I sign in using the accounts-password package?

When I sign in, I expect the page to redirect the user on successful sign in however I am having to reload the page manually to redirect it.

Any help on this issue would be greatly appreciated!

My react-router routes are:

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { Router, Route, IndexRoute, browserHistory } from 'react-router'

import App from './containers/App'
import Recordings from './containers/Recordings'
import LandingPage from './containers/LandingPage'

import { BloodPressure } from '../collections/BloodPressure'

const routes = (
	<Router history={browserHistory}>
		<Route path="/" component={App}>
			<IndexRoute component={LandingPage} />
			<Route path="dashboard" component={Recordings} />
		</Route>
	</Router>
)

Meteor.startup( ()=> {
	ReactDOM.render(routes, document.querySelector('.render-target'))
})

My App component is:

import React, { Component } from 'react'
import { createContainer } from 'meteor/react-meteor-data'
import { browserHistory } from 'react-router'

import Header from './Header'

class App extends Component {
	constructor(props) {
		super(props)
	}

	render() {
		return(
			<div>
				<div className="ui four container">
					<Header />
					{this.props.children}
				</div>

				<div className="footer">
					<p>Designed and Developed by <a href="http://thomashoadley.co.uk" target="_blank">Thomas Hoadley</a></p>
				</div>
			</div>				
		)		
	}
}

export default createContainer(() => {
	return {
		signedIn: Meteor.userId()
	}
}, App)
2

Found the solution! Import the following to modules in the login component:

import { Tracker } from 'meteor/tracker'
import { browserHistory } from 'react-router'

and use them as follows:

componentWillMount(){
  Tracker.autorun(() => {
    if (Meteor.user()) {
      browserHistory.push('/dashboard')
    } else if(!Meteor.user()) {
			browserHistory.push('/')
    }
  })
}
3

I’m a bit confused as to where the componentWillMount() is placed. Do we define it under the App component?

Also, wouldn’t using onEnter be easier?