React Router visibly slow compared to Flow Router [SOLVED]

I have recently started getting on the bandwagon and converting some existing apps to React and React Router from Blaze and FlowRouter. However the transition between states is visibly slower with 1 to 2 second wait times on DOM replacement, whereas FlowRouter is almost instant on replacing the DOM.

On one project I had a nice fade between Routes as the DOM replaced, but now with React Router the fade is irrelevant because the load is so visibly noticeable.

Is this normal for React Router? My Meteor setup is pretty standard with React, React Router and I removed Blaze Templates that I replaced with static html package.

Thanks!

SOLUTION
@warpdrive comment is correct, you must use [quote=“warpdrive, post:5, topic:33249”]
<Link to="/link-path">Link Name</Link>
[/quote]

for any internal link React routes.

This is definitely not standard - of course nobody would ever use a router with long transition times! There is probably a bug in your code somewhere.

Hmmm, Ok I’ll check it out. The setup is pretty much copy pasta from the docs. If I can’t find it I’ll post something.

I still can’t seem to find a solution. I have tried removing and adjusting things. But the page changes route as if it were a normal page load like on a PHP based system vs instant like FlowRouter.

import React from 'react'
import {render} from 'react-dom'
import { Router, Route, Link, browserHistory } from 'react-router'
import HomeMain from '../layout/home.jsx'
import Admin from '../layout/admin.jsx'
import NewPost from '../layout/new-post.jsx'


Meteor.startup(() => {
	render(
		<Router history={browserHistory}>
		    <Route path='/' component={HomeMain}/>
		    <Route path='/admin' component={Admin}/>
    		    <Route path='/admin/new-post' component={NewPost}/>
		</Router>,
		document.getElementById('app')
	)
});

Are you using Link component from react router for route transitions.

import {Link } from 'react-router'
...
<Link to="/">Home</Link>
...

If you use <a href="/">Home</a>, then React Router reloads entire Meteor app again and that causes it to be slow.

4 Likes

We have a winner!

Thanks :slight_smile:

1 Like