는 라우터가 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가 수 : -

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을 수정할 수, 라이브 업데이트를 유지하기 위해 여기 예제 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에 소품을 전달하면 기본적으로 BrowserRouter는 버전 기록을 사용하고 전달 된 기록을 무시하므로 경고를 표시하지 않으려면 BrowserRouter이 아닌 { Router } from 'react-router-dom'을 사용해야하며 예상대로 모든 것이 작동합니다.