How to use push in react router v4

[vipin733]

I'm following react-meteor And I'm stuck with "push()" method , Actually I'm using react-router v4 and everything is changed and when I tried to push its faild

here is my complete code

 import {Meteor} from 'meteor/meteor';
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route} from 'react-router-dom';
import PropTypes from 'prop-types';
import {Tracker} from 'meteor/tracker';
import createBrowserHistory from 'history/createBrowserHistory';

import SignUp from '../imports/ui/SignUp';
import Link from '../imports/ui/Link';
import NotFound from '../imports/ui/NotFound';
import Login from '../imports/ui/Login';

const history = createBrowserHistory();

const unauthenticatedPages = ['/','signup'];
const authenticatedPages   = ['/link'];
const routes = (
    <Router >
        <div>
          <Route exact path="/" component={Login}/>
          <Route path="/signup" component={SignUp}/>
          <Route path="/link" component={Link}/>
          {/* <Route exact path="/notfound" component={NotFound}/> */}
        </div>
    </Router>
);

Tracker.autorun(() => {
  const isAuthenticated        = !!Meteor.userId();
  const pathname               = history.location.pathname;
  const isUnauthenticatedPages = unauthenticatedPages.includes(pathname);
  const isAuthenticatedPages   = authenticatedPages.includes(pathname);

  if (isUnauthenticatedPages && isAuthenticated) {
    // this.context.history.push('/link')
  }else if (isAuthenticatedPages && !isAuthenticated ) {
    // this.context.history.push('/')
  }
 console.log('Authenticated',isAuthenticated, pathname);
}) ;
Meteor.startup(() => {
  ReactDOM.render(routes, document.getElementById('app'));
});

errrors

package json
{
  "name": "short-link",
  "private": true,
  "scripts": {
    "start": "meteor run"
  },
  "dependencies": {
    "babel-runtime": "^6.20.0",
    "meteor-node-stubs": "~0.2.4",
   "history": "^4.7.2",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-history": "^0.18.2",
    "react-router-dom": "^4.2.2"
  }
}

please help its I'm really stuck with this problem

[DeepMind77]

I'm also using react-router v4 and facing the same problem.

[asabanovic]

Here is the tutorial done with React V4, for all those that follow the same tutorial https://github.com/asabanovic/short-lnk-app

[archi0309]

1.Remove the tracker.autorun() 2.Create a new route component to valid , each time privilege.

my code snippet const AuthRoute = ({component:Component,...props}) => ( <Route {...props} render={props => ( !!Meteor.userId() ? ( <Component {...props}/> ) : ( <Redirect to={{pathname:'/login',state: {from: props.location}}}/> ) )}

/>

)

[varunalex]

Replace replace() method instead of push() method. In replace method your are adding new history on your link but with push method you are pushing links to the current history stack.

[arifmahmudrana]

@archi0309 in this way you will you will loose reactivity e.g if user is logged out user will not be automatic logged out unless user switch to other route.

[fredbarbarossa]

Hi, I got is working after some hours of research and testing. Here is my code.

import { Meteor } from 'meteor/meteor'; import React from 'react'; import ReactDOM from 'react-dom'; import { Router, Route, Switch } from 'react-router-dom'; import {createBrowserHistory} from 'history'; import { Tracker} from 'meteor/tracker'; import SignUp from '../imports/ui/SignUp'; import Link from '../imports/ui/Link'; import NotFound from '../imports/ui/NotFound'; import Login from '../imports/ui/Login';

const unauthenticatedPages = ['/', '/signup']; const authenticatedPages = ['/links']; const history = createBrowserHistory();

const routes = (

<Router history={history}>
<Switch>
    <Route path='/' exact component={Login}/>
    <Route path='/signup' exact component={SignUp} />
    <Route path='/links' exact component={Link} />
    <Route component={NotFound} />
</Switch>
</Router>

); Tracker.autorun(() => { const isAuthenticated = !!Meteor.userId(); const pathname = history.location.pathname; const isUnauthenticatedPage = unauthenticatedPages.includes(pathname); const isAuthenticatedPage = authenticatedPages.includes(pathname); // console.log('isAuthenticated ',isAuthenticated); if (isAuthenticated && isUnauthenticatedPage) { history.push('/links'); } if (!isAuthenticated && isAuthenticatedPage) { history.push('/'); } }); Meteor.startup(() => { ReactDOM.render(routes, document.getElementById('app')); });