Problem with react-router

help
1

I’m trying to use react-router based on Level 2 Meteor + React #2 - React Router - YouTube. I had to rename files a little bit as this tutorial does not reflect my default tree.

I made imports/ui/route.js with the following content:

import React from ‘react’;
import {
Router,
Route,
IndexRoute,
browserHistory
} from ‘react-router’;
import { render } from ‘react-dom’;
import App from ‘./App’;

Meteor.startup(() => {
render(


,
document.getElementById(‘react-target’));
});

And changed main.jsx to the following:

import React from ‘react’;
import { Meteor } from ‘meteor/meteor’;
import { render } from ‘react-dom’;
// import { App } from ‘/imports/ui/App’;

import ‘…/imports/ui/routes’

Initially I got the following error: “TypeError: Cannot read properties of undefined (reading ‘pathname’)” …based on this: reactjs - React Router: Cannot read property ‘pathname’ of undefined - Stack Overflow I changed the “Router” import to “BrowserRouter as Router” import. The following error was left: “React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: undefined.”

With this last error, I reached the help page: javascript - React JS - Route - Element type is invalid - Stack Overflow …I tried to change import { Router } to import Router, but this was useless, giving me other errors.

How to use react-router with Meteor and React in the similar manner as given in this manual?

2

If your React version is 18+, that is no longer the way for mounting the app. You need to use createRoot

1 Like
3

@paulishca thanks, then I have some more questions.

Ultimate React Router v6 Guide (webdevsimplified.com) - is this guide about react’s new router? What I have to do to make it work with Meteor? The basic files do not completely fit. Should I delete meteor files and add those react files - is’nt this then simply a react project? I’ve now having hard time understanding, what Meteor is doing in this react project at all - is it providing the realtime changes in UI?

Is there any manual, which explains in terms of Meteor, how to add this React router and make everything work, or would you like to write such guide?

What is the matter of running Meteor with React and which mode of Meteor should be used to always get help from the Meteor documentation? Is there such mode? I’m new to Meteor and not very strong in hacking together things for Meteor from guides, which are written for React instead - I think I mess up something.

Edit: And one more question …why it has separate packages for browser and mobile? Is this something, what is going to make my life harder?