How to use React Hook userTracker in Meteor?

help
1

I am trying to implement Login/ Logout using Meteor React hooks. But getting the below error.

Routes.jsx

import React, { Component } from "react";
// .... other imports 
import LoginForm from "/imports/ui/login/loginForm";
import LogOut from "/imports/ui/logout/logout";
 
export const renderRoutes = () => {

// below is the hook I am referring here
  
  const { user, isUserLoggedIn } = useTracker(() => {
    const user = Meteor.user();
    const userId = Meteor.userId();
    return {
      user,
      isUserLoggedIn: !!iuserId,
    };
  });

  return (
    <BrowserRouter>
      <div className="row">
        <div className="col-md-12">
          <Navbar bg="dark" variant="dark" expand="lg" sticky="top">
            <Navbar.Brand href="#home">React Bootstrap Navbar</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
              <Nav className="mr-auto">
                <Nav.Link as={Link} to="/">
                  Home
                </Nav.Link>
                <Nav.Link as={Link} to="/city">
                  Events
                </Nav.Link>
                <Nav.Link as={Link} to="/place">
                  Clubs
                </Nav.Link>
            </Navbar.Collapse>
          </Navbar>
          <br />
        </div>
      </div>

      {isUserLoggedIn  ? (
        <div>
          <LogOut />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/city" component={City} />
            <Route exact path="/place" component={Place} />
            <Route component={NotFound} />
          </Switch>
        </div>
      ) : (
        <LoginForm />
      )}
    </BrowserRouter>
  );
};

Getting the below error.

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
2

I guess in the second parameter of useTracker() you’d need to pass an empty array, but I’m not sure if that actually solves this problem.

3

@peterfkruger, I have added an empty array to that hook. No luck.

4

I guess you have already checked reasons 1 and 3 as listed in the error, haven’t you?