Cách lấy tuyến đường hiện tại trong react-router 2.0.0-rc5

Tôi có một bộ định tuyến như sau:

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

Đây là những gì tôi muốn đạt được:

1. Chuyển hướng người dùng đến /loginnếu chưa đăng nhập
2. Nếu người dùng cố gắng truy cập /loginkhi họ đã đăng nhập, hãy chuyển hướng họ đến root/

vì vậy bây giờ tôi đang cố gắng để kiểm tra trạng thái của người dùng ở App's componentDidMount, sau đó làm như sau:

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

Vấn đề ở đây là tôi không thể tìm thấy API để lấy tuyến đường hiện tại.

Tôi nhận thấy vấn đề đã đóng này được đề xuất bằng cách sử dụng bộ xử lý hỗn hợp Router.ActiveState và định tuyến, nhưng có vẻ như hai giải pháp này hiện không được dùng nữa.

Sau khi đọc thêm một số tài liệu, tôi đã tìm ra giải pháp:

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

Tôi chỉ cần truy cập thuộc tính được đưa locationvào của phiên bản thành phần như:

var currentLocation = this.props.location.pathname

Bạn có thể lấy tuyến đường hiện tại bằng cách sử dụng

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

... cho phép bạn truy cập vào các đạo cụ từ <Route ...>thành phần hoạt động cấp thấp nhất .

Được...

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

currentRoute.pathtrả lại 'childpath'và currentRoute.componenttrả lại function _class() { ... }.

Nếu bạn sử dụng lịch sử, thì Bộ định tuyến sẽ đưa mọi thứ vào vị trí từ lịch sử, chẳng hạn như:

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

hiểu rồi?

Kể từ phiên bản 3.0.0, bạn có thể nhận được tuyến đường hiện tại bằng cách gọi:

this.context.router.location.pathname

Mã mẫu dưới đây:

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

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

Đối với bất kỳ người dùng nào gặp sự cố tương tự trong năm 2017, tôi đã giải quyết theo cách sau:

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

và sử dụng nó như thế này:

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

Trong App.jsthêm bên dưới mã và thử

window.location.pathname

Bạn có thể sử dụng phương thức hỗ trợ 'isActive' như sau:

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

isActive sẽ trả về true hoặc false.

Đã thử nghiệm với bộ định tuyến phản ứng 2.7

Hoạt động cho tôi theo cách tương tự:

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

Và sau đó, tôi có thể truy cập "this.props.location.pathname" trong hàm MyComponent.

Tôi quên rằng đó là tôi ...))) Liên kết sau mô tả thêm về tạo thanh điều hướng, v.v.: react router this.props.location

Hãy thử lấy đường dẫn bằng cách sử dụng: document.location.pathname

Trong Javascript, bạn có thể URL hiện tại thành từng phần. Kiểm tra: https://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/