react-router2.0.0-rc5で現在のルートを取得する方法

私は以下のようなルーターを持っています：

<Router history={hashHistory}>
    <Route path="/" component={App}>
        <IndexRoute component={Index}/>
        <Route path="login" component={Login}/>
    </Route>
</Router>

これが私が達成したいことです：

1. /loginログインしていない場合は、ユーザーをにリダイレクトします
2. ユーザー/loginがすでにログインしているときにアクセスしようとした場合は、rootにリダイレクトします/

今私は、ユーザーの状態を確認しようとしているAppのcomponentDidMountような何かを、その後、：

if (!user.isLoggedIn) {
    this.context.router.push('login')
} else if(currentRoute == 'login') {
    this.context.router.push('/')
}

ここでの問題は、現在のルートを取得するためのAPIが見つからないことです。

このクローズされた問題は、Router.ActiveStateミックスインとルートハンドラーの使用が示唆されていることがわかりましたが、これら2つのソリューションは現在非推奨になっているようです。

さらにいくつかのドキュメントを読んだ後、私は解決策を見つけました：

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/location.md

次のlocationようなコンポーネントのインスタンスの挿入されたプロパティにアクセスする必要があります。

var currentLocation = this.props.location.pathname

を使用して現在のルートを取得できます

const currentRoute = this.props.routes[this.props.routes.length - 1];

...これにより、最下位レベルのアクティブ<Route ...>コンポーネントから小道具にアクセスできます。

与えられた...

<Route path="childpath" component={ChildComponent} />

currentRoute.pathを返し'childpath'、をcurrentRoute.component返しますfunction _class() { ... }。

履歴を使用する場合、ルーターは次のようにすべてを履歴の場所に配置します。

this.props.location.pathname;
this.props.location.query;

それを得る？

バージョン3.0.0以降、次のコマンドを呼び出すことで現在のルートを取得できます。

this.context.router.location.pathname

サンプルコードは以下のとおりです。

var NavLink = React.createClass({
    contextTypes: {
        router: React.PropTypes.object
    },

    render() {   
        return (
            <Link {...this.props}></Link>
        );
    }
});

2017年に同じ問題が発生したユーザーについて、次の方法で解決しました。

NavBar.contextTypes = {
    router: React.PropTypes.object,
    location: React.PropTypes.object
}

次のように使用します。

componentDidMount () {
    console.log(this.context.location.pathname);
}

ではApp.jsコードと試してみるの下に追加

window.location.pathname

'isActive'小道具は次のように使用できます。

const { router } = this.context;
if (router.isActive('/login')) {
    router.push('/');
}

isActiveはtrueまたはfalseを返します。

react-router2.7でテスト済み

私にとっても同じように機能します。

...
<MyComponent {...this.props}>
  <Route path="path1" name="pname1" component="FirstPath">
  ...
</MyComponent>
...

そして、MyComponent関数で「this.props.location.pathname」にアクセスできます。

私はそれが私であったことを忘れました...）））次のリンクは、ナビゲーションバーの作成などの詳細を説明しています：react router this.props.location

次を使用してパスを取得してみてください。 document.location.pathname

Javascriptでは、現在のURLを部分的に指定できます。チェックアウト：https： //css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/