は、ルータが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')); 
}); 

私のソースコードであるルータ

の現在位置を取得する方法を知りたいです反応ルータのドキュメントを使用して履歴を使用していましたが、私はその場所を取得しませんでした。

ルートの現在地を取得するにはどうすればよいですか？

私はreduxを使用していません。私はそれを使わないで回答していただきたいと思います。

ありがとう、マイケル。

Answer 1

これにはwithrouter HOCを使用できます。ルートが変更されると、ラップされたコンポーネントが再レンダリングされます。可能性が

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

    return false; 
}); 

とあなたのTracker.autorun：次のように認証されたページにしているかどうか、あなたがChangeTrackerを変更することができ、ライブ更新を維持するために - おかげで

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

優秀ヘルプ - ここでは一例ですhistory.locationによって、あなたはhistory.location.pathnameを使用することができ、パス名のルータV4を反応させるからあなたの現在の位置を取得することができます

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

Answer 3

：ように見えます。あなたは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にpropsとして履歴を渡すと、デフォルトでBrowserRouterは履歴のバージョンを使用して渡された履歴を無視するので、BrowserRouterではなく{ Router } from 'react-router-dom'を使用し、すべてが期待どおりに機能するはずです。