web-dev-qa-db-de.com

React Router v4 ruft den aktuellen Standort ab

Ich habe gerade mit der Verwendung von React-Router V4 begonnen und möchte wissen, wie der aktuelle Standort des Routers ermittelt wird

Das ist mein Quellcode

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 gemäß der Dokumentation des React-Routers versucht, den Verlauf zu verwenden, aber ich habe den Speicherort nicht erhalten.

Wie erhalte ich den aktuellen Standort einer Route?

Ich benutze kein Redux und ich werde eine Antwort ohne es schätzen.

Danke, Michael.

5

Sie können dazu den withrouterNAME_ HOC verwenden. Die umschlossene Komponente wird bei jeder Routenänderung neu 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'));
}); 
7
hazardous

Ausgezeichnete Hilfe, danke. Damit Sie immer auf dem neuesten Stand sind, ob Sie sich auf einer authentifizierten Seite befinden oder nicht, können Sie ChangeTracker folgendermaßen ändern:

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

  return false;
});

und dein Tracker.autorun könnte so aussehen:

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

Sie können Ihren aktuellen Standort vom React Router v4 über history.location abrufen. Für den Pfadnamen können Sie history.location.pathname verwenden. Weitere Details dazu finden Sie in den offiziellen React Router-Dokumenten auf github React Router Training .

Ihr Code sollte also so aussehen:

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! history als Requisite an BrowserRouter übergeben warnt, da BrowserRouter standardmäßig seine Verlaufsversion verwendet und den von Ihnen übergebenen Verlauf ignoriert. Um diese Warnung zu verhindern, sollten Sie { Router } from 'react-router-dom' anstelle von BrowserRouter verwenden und alles funktioniert so, wie Sie es erwarten.