阵营路由器V4获得当前位置

Question

我刚才用反应路由器V4开始，我想知道如何让路由器

的当前位置，这是我的源代码

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')); 
}); 

我根据试反应路由器文档使用历史，但我没有得到的位置。

如何获取路线的当前位置？

我不使用REDX，我会很感激没有它的答案。

谢谢，迈克尔。

Answer 1

您可以使用withrouter HOC为此。它会在路线改变时重新呈现包裹组件。这里有一个例子 -

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

卓越的帮助的感谢 - 保持即时更新，无论你的身份验证的页面上，您都可以修改ChangeTracker如下：

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

    return false; 
}); 

和你Tracker.autorun可能看起来像：

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

Answer 3

你可以得到你的当前位置由history.location并可以使用history.location.pathname的路径反应路由器V4。你可以在github React Router Training的官方反应路由器文档中找到更多关于它的细节。

所以，你的代码应该是这样的：

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 
 
});

重要！将历史记录作为道具传递给BrowserRouter会发出警告，因为默认情况下，BrowserRouter使用其历史版本并忽略您传递的历史记录，因此为防止出现此警告，您应该使用{ Router } from 'react-router-dom'而不是BrowserRouter，并且所有内容都按您期望的方式工作。