React Router (from NPM) href reloading entire page, doesn't switch like it did in FlowRouter?

help
1

I have a Meteor 1.3 project here that uses React Router.

Before using Meteor 1.2 and FlowRouter, I could just href some links using normal paths and it would switch React components without reloading the page.

Now when I click around I get full-page reloads.

What am I doing wrong?

My routes.jsx file:

import React from 'react';
import { Router, Route, browserHistory } from 'react-router';

import AppLayout from '/imports/ui/layouts/AppLayout.jsx';
import CategoryContainer from '/imports/ui/containers/CategoryContainer.jsx';

export const renderRoutes = () => (
  <Router history={browserHistory}>
    <Route path="/" component={AppLayout}>
      <Route path="category/:categorySlug" component={CategoryContainer}/>
    </Route>
  </Router>
)
2

Bump! This is quite important, FlowRouter seamless switched out components, I have no doubt ReactRouter does the same.

I must have messed something up on my end.

3

which component are you using for navigating? <Link /> or <a />

4

@jchavez - just simple <a href='/foobar'> links, the same as I used to do in FlowRouter. Is this not the way to do things using React Router?

5

That’s the problem. You should be using <Link /> -instead of <a/>- which is a component provided by react-router

It would be like:

<Link to="/foobar">Foobar</Link>

1 Like
6

Hey thanks, I wonder how I missed that. I’ll test it out tonight.