Meteor with react router v4 - redirect not working

Question

I have two files: route.js and main.js. I created a tracker inside the main.js file where I constantly check the loggedin state. Based on alanning:roles user roles I need to redirect users to a different interface than administrators. But doesn't seem to do anything.

main.js

import {Meteor} from 'meteor/meteor';
import {Tracker} from 'meteor/tracker';
import {onAuthenticationChange, routes} from '../imports/routes/routes';
import ReactDOM from 'react-dom';

Tracker.autorun(() => {
  const authenticated = !!Meteor.userId();
  let currentUserIsAdmin = false;

  if(authenticated) {
    const isAdmin = Roles.userIsInRole( Meteor.userId(), ['admin'], 'employees' );

    if(isAdmin) {
      currentUserIsAdmin = true;
    } else {
      currentUserIsAdmin = false;
    }
  }

  onAuthenticationChange(authenticated, currentUserIsAdmin);
});

Meteor.startup(() => {
  ReactDOM.render( routes, document.getElementById('customerPortalApp'));
});

router.js

import {Meteor} from 'meteor/meteor';
import {Route, BrowserRouter, Switch, Redirect} from 'react-router-dom';
import React from 'react';

...

const publicPages = [
  '/',
  '/login'
];
const adminPages = [
  '/admin',
  '/klant',
];
const customerPages = [
  '/klant',
]


// check authentication for pages
 export const onAuthenticationChange = (authenticated, currentUserIsAdmin) => {
  console.log('is authenticated...', authenticated);

  const path = this.location.pathname;
  const isUnauthenticatedPage = publicPages.includes(path);
  const isAuthenticatedPage = adminPages.includes(path);

  if( authenticated ) {
    if(currentUserIsAdmin) {
        console.log('huidige gebruiker is admin...');
        return <Redirect to="/admin"></Redirect>;
    } else {
        console.log('huidige gebruiker is normaal......');
        return <Redirect to="/klant"></Redirect>; 
    }
  } else if (!authenticated && isAuthenticatedPage) {
    console.log('No rights to view the page... routed to the path login page');
  }

}

function RouteWithLayout({layout, component, ...rest}){
  return (
    <Route {...rest} render={(props) =>
  React.createElement( layout, props, React.createElement(component, props))
}/>
  );
}

export const routes = (
<BrowserRouter>
    <Switch>
        {/* onEnter={publicPage} */}

        {/* default side */}
        <RouteWithLayout layout={AuthenticationLayout} exact path="/" component={AuthLogin} />
        <RouteWithLayout layout={AuthenticationLayout} exact path="/login" component={AuthLogin} />

        {/* admin side */}
        <RouteWithLayout layout={AdminLayout} path="/admin" exact component={AdminDashboard} />


        {/* customer side */}
        <RouteWithLayout layout={CustomerLayout} path="/klant" exact component={CustomerDashboard} />

        <Route component={PageNotFound} />
    </Switch>
  </BrowserRouter>
);

I also tried to use this.props.history.push('/admin') but the this.props.history is not available

Update with solution: I first changed the BrowserRouter into Router, which has a history property available:

import {Router, Route, Switch} from 'react-router-dom';

the next step is to create a constant variable which gives easy access to the history:

const history = createBrowserHistory();

Finally we can use return history.replace('/admin'); to navigate to pages

Answer 1

Look this react-router package and install & import this

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

and change this line const path = this.location.pathname; like below

const path = browserHistory.getCurrentLocation().pathname;

and add browserHistory.replace('/admin'); like below

if(currentUserIsAdmin) {
    console.log('huidige gebruiker is admin...');
    //return <Redirect to="/admin"></Redirect>;
    browserHistory.replace('/admin');
} else {
    console.log('huidige gebruiker is normaal......');
    //return <Redirect to="/klant"></Redirect>; 
    browserHistory.replace('/klant');
}

Edit:

Add Passage as like via NPM:

npm i @dollarshaveclub/react-passage@latest --save

A Passage component used for identifying routes in your app.

Then add Passage tag before <BrowserRouter> tag as like

<Passage targets={[ RouteWithLayout ]}>
   <BrowserRouter>
     ......
     ......
   </BrowserRouter>
</Passage>

hope it will help.