web-dev-qa-db-ja.com

Reactルーターv4は現在の場所を取得します

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

React-routerのドキュメントに従って履歴を使用しようとしましたが、場所がわかりませんでした。

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

私はreduxを使用していません。それなしで答えていただければ幸いです。

ありがとう、マイケル。

reactjsmeteorreact-routerreact-router-v4
8
Michael Horojanski

これには 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'));
});
8
hazardous

すばらしい助けに感謝します-認証されたページを表示しているかどうかに関係なく、ライブアップデートを継続するには、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('/');
      }
    }
});
3
BruceM

現在の場所は、react routerv4からhistory.locationで取得でき、パス名にはhistory.location.pathnameを使用できます。詳細については、githubの公式react routerドキュメントをご覧ください 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'を使用する必要があり、すべてが期待どおりに機能します。

1
Mostafa Darezereshki