Setting up React Router with Meteor

help
1

Hello!

I’m new to Meteor and tried to set up an app with React but ran into some problems with React Router.

I followed the documentation found here: https://guide.meteor.com/react.html#routing

The routers don’t seem to work at all. The page simply reloads and returns the same content.

Any help would be appreciated!

Thank you

Here is my component:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Switch } from 'react-router';
import './style.css'
import Navbar from './Navbar'
import Login from './Login'

import { createBrowserHistory } from 'history';
 
const history = createBrowserHistory();


class App extends Component {
  render(){
    return(
      <Router history = {history}>
      <Switch>
      <div>
       <Navbar />
       <Route exact path='/' compoment = {App} />
       <Route path='/login' compoment = {Login} />
      </div>
      </Switch>
      </Router>
    );
  }
}

export default App

Here is also the main.js file with the startup() method:

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
 
import App from '../imports/ui/App.js';
 
Meteor.startup(() => {
  render(<App />, document.getElementById('render-target'));
});
2

this means you either:

  • have a javascript error. What is in your browser console?
  • you don’t use react-router’s <Link /> component to define links in your app.
3

Yes, I did get an error, sorry forgot to mention that:

Warning: React does not recognize the computedMatch prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase computedmatch instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in div (created by App)
in Switch (created by App)
in Router (created by App)
in App

I’ll try using the Link component, but shouldn’t it work without it?

4

the warning is not related to the problem.

Yes, you have to use the <Link /> component, because a simple <a /> tag will do the browser default behaviour: loading the full page.

If you come from other routers like FlowRouter you might wonder, why you can use <a />-tags there without a full page reload. The reason is that FlowRouter listens on document click and checks whether a a-tag has been clicked (see also here why this is a problem: https://github.com/kadirahq/flow-router/issues/705)

5

Oh, that makes perfect sense. Thank you macrozone!