Open vipin733 opened 7 years ago
I'm also using react-router v4 and facing the same problem.
Here is the tutorial done with React V4, for all those that follow the same tutorial https://github.com/asabanovic/short-lnk-app
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}}}/> ) )}
/>
)
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.
@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.
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')); });
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
errrors![erro](https://user-images.githubusercontent.com/10106412/29752879-bf6f3c4c-8b83-11e7-8c3c-e994f2dd1ec8.PNG)
please help its I'm really stuck with this problem