Reagieren Router v4 aktuellen Standort erhalten

Question

ich mit gerade begonnen haben, reagieren-Router V4 und ich möchte wissen, wie aktuelle Position des Routers Code

Dies ist meine Quelle nach

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

import Signup from '../imports/ui/signUp'; 
import Link from '../imports/ui/link'; 
import Login from '../imports/ui/login'; 
import NotFound from '../imports/ui/notFound'; 

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

const routes = (
    <Router history={history}> 
     <Switch> 
      <Route exact path="/" component={Login}/> 
      <Route exact path="/signup" component={Signup}/> 
      <Route path="/links" component={Link}/> 
      <Route component={NotFound}/> 
     </Switch> 
    </Router> 
); 
Tracker.autorun(() => { 
    const unlisten = history.listen((location, action) => { 
     // location is an object like window.location 
     console.log(action, location.pathname, location.state) 
    }) 

    const isAuthenticated = !!Meteor.userId(); 
    console.log('location: ', location.pathname); 
    //const pathName = 
}); 

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

Ich habe versucht, zu erhalten, react-router-Dokumentation zur Verwendung der Historie, aber ich habe den Standort nicht erhalten.

Wie bekomme ich den aktuellen Standort einer Route?

Ich verwende nicht redux und ich werde eine Antwort ohne es zu schätzen wissen.

Danke, Michael.

Answer 1

Sie können die withrouter HOC dafür verwenden. Bei jeder Änderung der Route wird die umschlossene Komponente erneut gerendert. Hier ist ein Beispiel -

import {Meteor} from 'meteor/meteor'; 
import React, {Component} from 'react'; 
import ReactDOM from 'react-dom'; 
import createHistory from 'history/createBrowserHistory' 
import {Route, BrowserRouter as Router, Switch} from 'react-router-dom' 
import {withRouter} from 'react-router' 
import {Tracker} from 'meteor/tracker'; 

import Signup from '../imports/ui/signUp'; 
import Link from '../imports/ui/link'; 
import Login from '../imports/ui/login'; 
import NotFound from '../imports/ui/notFound'; 

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

const 
ChangeTracker = withRouter(({match, location, history}) => { 
    console.log(action, location.pathname, location.state); 
    return false; 
}), 
routes = (
    <Router history={history}> 
     <Switch> 
      <Route exact path="/" component={Login}/> 
      <Route exact path="/signup" component={Signup}/> 
      <Route path="/links" component={Link}/> 
      <Route component={NotFound}/> 
     </Switch> 
     <ChangeTracker /> 
    </Router> 
); 

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

Answer 2

Ausgezeichnete Hilfe dank - Live-Aktualisierung zu halten, ob Sie auf einem authentifizierten Seite sind oder nicht, Sie könnten Change wie folgt ändern:

const ChangeTracker = withRouter(({match, location, history}) => { 
    const pathName = location.pathname; 
    isUnauthenticatedPage = unauthenticatedPages.includes(pathName); 
    isAuthenticatedPage = authenticatedPages.includes(pathName); 

    return false; 
}); 

und Ihre Tracker.autorun konnte wie folgt aussehen:

Tracker.autorun(()=>{ 
    const isAuthenticated = !!Meteor.userId(); 
    if (isAuthenticated){ 
     if (isUnauthenticatedPage){ 
     history.push('/links'); 
     } 
    }else{ 
     if (isAuthenticatedPage) { 
     history.push('/'); 
     } 
    } 
}); 

Answer 3

Sie Ihren aktuellen Standort erhalten können vom Router v4 von history.location reagieren und für den Pfad Sie history.location.pathname verwenden können. Sie können mehr Details über sie finden in der offiziellen Router docs auf Github React Router Training reagieren.

So sollte der Code wie folgt sein:

import {Meteor} from 'meteor/meteor'; 
 
import React, {Component} from 'react'; 
 
import ReactDOM from 'react-dom'; 
 
import createHistory from 'history/createBrowserHistory' 
 
import { Route, Router, Switch } from 'react-router-dom' 
 
import {Tracker} from 'meteor/tracker'; 
 

 
import Signup from '../imports/ui/signUp'; 
 
import Link from '../imports/ui/link'; 
 
import Login from '../imports/ui/login'; 
 
import NotFound from '../imports/ui/notFound'; 
 

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

 
const routes = (
 
    <Router history={history}> 
 
     <Switch> 
 
      <Route exact path="/" component={Login}/> 
 
      <Route exact path="/signup" component={Signup}/> 
 
      <Route path="/links" component={Link}/> 
 
      <Route component={NotFound}/> 
 
     </Switch> 
 
    </Router> 
 
); 
 
Tracker.autorun(() => { 
 
    const isAuthenticated = !!Meteor.userId(); 
 
    const pathname = history.location.pathname; 
 
    //Now you can do whatever you want here 
 
});

Wichtig! vorbei Geschichte als Requisiten BrowserRouter macht Warnung, weil standardmäßig BrowserRouter verwendet, um seine Version der Geschichte und ignoriert die Geschichte, die Sie übergeben, so dass diese Warnung verhindern, dass Sie { Router } from 'react-router-dom' anstatt BrowserRouter und alles, was man erwarten arbeitet in der Art und Weise verwendet werden soll.