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가 이미 로그인 한 상태에서 액세스를 시도한 경우 루트로 리디렉션합니다./

그래서 지금은에서 사용자의 상태를 확인하기 위해 노력하고있어 AppS ' componentDidMount, 무언가를 좋아한다 :

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

여기서 문제는 현재 경로를 가져 오는 API를 찾을 수 없다는 것입니다.

Router.ActiveState mixin 및 라우트 핸들러를 사용하여 제안 된 이 닫힌 문제를 발견 했지만이 두 솔루션은 이제 더 이상 사용되지 않는 것 같습니다.

더 많은 문서를 읽은 후 해결책을 찾았습니다.

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는 참 또는 거짓을 반환합니다.

react-router 2.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/