ارتباط نشط باستخدام React-Router؟

هناك جزئين لحل هذه المشكلة

1. أن تستخدم exact الخاصة بالراوتر وذلك حتي تفتح الصفحة علي نفس ال Route الذي تكتبه فبدونها يتم اعتبار ( / ) من ال Route ( /about or /users ) أي عندما تريد الذهاب إلى ( home  ) يأخذك إلى About

   const Router = () => (
     <Router>
       <Switch>
             <Route exact path="/">
               <Home />
             </Route>
         
             <Route exact path="/about">
               <About />
             </Route>
         
             <Route exact path="/users">
               <Users />
             </Route>
   
       </Switch>
     </Router>
   )

    

2. بعد تسجيل الدخول عليك بتوجيه التطبيق إلى صفحة ال home ويمكنك عملها عن طريق react-router history
    

   afterLogin = () => {
     history.push('/');
   }

    

لكي تستعمل الروابط النشطه داخل ال navbar الخاص بالموقع وتستطيع أن تعطي لهم تنسيق معين في حالة وجعل ال  Home Link نشطًا بمجرد بدء التطبيق لابد من إستعمال المكون NavLink المرفق ب react-router داخل ال navbar الخاص بك 

<NavLink exact={true} activeClassName='is-active' to='/'>Home</NavLink>
<NavLink activeClassName='is-active' to='/about'>About</NavLink>
<NavLink activeClassName='is-active' to='/users'>Users</NavLink>

عند بدء التطبيق سوف يكون اللينك الخاص ب Home هو النشط وسوف يأخذ التنسيق الخاص بالكلاس "is-active"

وعند التنقل بين الروابط سوف يطبق التنسيق على الرابط النشط.