কীভাবে প্রতিক্রিয়া-রাউটার 2.0.0-আরসি 5 তে বর্তমান রুট পাবেন

Question 1

আমার নীচের মতো রাউটার রয়েছে:

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

আমি যা অর্জন করতে চাই তা এখানে:

/loginলগ ইন না থাকলে ব্যবহারকারীকে পুনর্নির্দেশ করুন
ব্যবহারকারীরা /loginইতিমধ্যে লগ ইন করার পরে যদি অ্যাক্সেসের চেষ্টা করে , তাদের রুটে পুনর্নির্দেশ করুন/

তাই এখন আমি ব্যবহারকারীর রাষ্ট্র চেক করতে চেষ্টা করছি App'র componentDidMount, তারপর ভালো কিছু করতে:

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

এখানে সমস্যাটি হ'ল আমি বর্তমান রুটটি পেতে API খুঁজে পাচ্ছি না।

আমি এই বদ্ধ সমস্যাটি রাউটার ব্যবহার করার পরামর্শ দিয়েছি cএকটিভ স্টেট মেশিন এবং রুট হ্যান্ডলারগুলি ব্যবহার করে, তবে দেখে মনে হচ্ছে এই দুটি সমাধান এখন অবচিত হয়ে গেছে।

Question 2

আরও কিছু নথি পড়ার পরে আমি সমাধানটি পেয়েছি:

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

আমার কেবলমাত্র locationউপাদানটির উদাহরণের ইনজেকশন সম্পত্তিটি অ্যাক্সেস করতে হবে :

var currentLocation = this.props.location.pathname

Question 3

আপনি বর্তমান রুটটি ব্যবহার করে পেতে পারেন

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

... যা আপনাকে নিম্ন স্তরের সক্রিয় থেকে প্রপসগুলিতে অ্যাক্সেস দেয় <Route ...> উপাদান ।

দেওয়া ...

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

currentRoute.pathআয় 'childpath'এবং currentRoute.componentআয় function _class() { ... }।

Question 4

আপনি যদি ইতিহাস ব্যবহার করেন, তবে রাউটার ইতিহাস থেকে সমস্ত কিছু লোকেশনে রেখে দিয়েছে, যেমন:

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

এটা নাও?

Question 5

সংস্করণ 3.0.0 হিসাবে, আপনি কল করে বর্তমান রুটটি পেতে পারেন:

this.context.router.location.pathname

নমুনা কোড নীচে:

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

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

Question 6

2017 সালে একই সমস্যাযুক্ত যে কোনও ব্যবহারকারীর জন্য, আমি এটি নিম্নলিখিত উপায়ে সমাধান করেছি:

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

এবং এটি এর মতো ব্যবহার করুন:

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

Question 7

ইন App.jsকোড এবং চেষ্টা নিচে যোগ

window.location.pathname

Question 8

আপনি এর মতো 'isActive' প্রোপ ব্যবহার করতে পারেন:

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

isAtive একটি সত্য বা মিথ্যা ফিরিয়ে দেবে।

বিক্রিয়া-রাউটার 2.7 দিয়ে পরীক্ষিত

Question 9

আমার জন্য একইভাবে কাজ করে:

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

এবং তারপরে, আমি মাই কম্পোনেন্ট ফাংশনে "this.prop.location.pathname" অ্যাক্সেস করতে পারি।

আমি ভুলে গিয়েছিলাম যে এটি আমিই ছিল ...))) নীচের লিঙ্কটি নেভিগেশন বার ইত্যাদির জন্য আরও বর্ণনা করে: রাউটারটিকে প্রতিক্রিয়া করুন rops

Question 10

ব্যবহার করে পথটি ধরার চেষ্টা করুন: document.location.pathname

জাভাস্ক্রিপ্টে আপনি বর্তমান URL টি কিছু অংশে করতে পারেন। দেখুন: https://css-tricks.com/snippets/javascript/get-url-and-url-parts-in- javascript/