陣營路由器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，並且所有內容都按您期望的方式工作。