web-dev-qa-db-ja.com

react-router 2.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つの解決策は現在推奨されていないようです。

javascriptreactjsreact-router
82
wxtry

もう少し文書を読んだ後、私は解決策を見つけました：

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

以下のように、コンポーネントのインスタンスのインジェクトされたプロパティlocationにアクセスするだけです。

var currentLocation = this.props.location.pathname
110
wxtry

現在のルートを取得することができます

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

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

与えられた...

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

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

27
colllin

履歴を使用する場合、Routerは次のように履歴からその場所にすべてを配置します。

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

それを得る？

10
one

バージョン3.0.0以降では、現在の経路を取得することができます。

this.context.router.location.pathname

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

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

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

2017年に同じ問題を抱えているユーザーのために、私はそれを次のように解決しました：

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

そしてこれを次のように使います。

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

あなたはそのように 'isActive'小道具を使うことができます：

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

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

React-router 2.7でテスト済み

2
MarvinVK

app.jsで試してくださいwindow.location.pathname

2
Tuan Nguyen

同じように私のために働く：

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

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

私はそれが私だったことを忘れていた...）））次のリンクは、ナビゲーションバーなどを作るための詳細について説明しています。--- ルータthis.props.locationに反応

0
Alex