मेरे पास 3 घटक हैं जो प्रतिक्रिया मार्गों का उपयोग करके मुख्य ऐप.जेएस कॉम्पोनेट में लोड होते हैं, जैसे:

import React, { Component } from 'react';
import './App.css';
import welcome from './components/welcome/welcome';
import Generalinfo from './components/generalinfo/generalinfo';
import Preferences from './components/preferences/preferences';
import Navigation from './UI/navigation/navigation';
import { Route , BrowserRouter } from 'react-router-dom';


class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Navigation />
          <Route path="/" exact component={ welcome } />  
          <Route path="/generalinfo" exact component={ Generalinfo } />
          <Route path="/preferences" exact component={ Preferences } />
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

जैसा कि आप देख सकते हैं कि ब्राउज़र में आपके द्वारा हिट किए गए यूआरएल के आधार पर निम्नलिखित 3 घटक लोड किए गए हैं:

  <Route path="/" exact component={ welcome } />  
  <Route path="/generalinfo" exact component={ Generalinfo } />
  <Route path="/preferences" exact component={ Preferences } />

मेरे पास एक नेविगेशन है जो नीचे जैसा दिखता है:

enter image description here

नेविगेशन कोड नीचे है:

import React from 'react';
import classes from './navigation.css';
import { Link } from 'react-router-dom';

const navigation = (props) => {

    const ACTIVE = { background: '#286090', color: '#fff'}

    return (
        <nav className={ classes.main__site__navigation }>
            <ul>
                <li>
                    <Link to="/">
                        1
                    </Link>
                </li>
                <li>
                    <Link to={{
                            pathname : '/generalinfo'
                        }}
                        className={ classes.active }
                    >
                        2
                    </Link>
                </li>
                <li>
                    <Link to={{
                            pathname : '/preferences'
                        }}>
                        3
                    </Link>
                </li>
            </ul>
        </nav>
    );
}

export default navigation;

अब मैं क्या करना चाहता हूं, कहें कि उपयोगकर्ता तीसरे घटक और अंतिम घटक पर है, तो कहें कि उपयोगकर्ता निम्न मार्ग पर है:

<Route path="/preferences" exact component={ Preferences } />

मैं चाहता हूं कि नेविगेशन पिछले 2 लिंक को हाइलाइट करे, (उपयोगकर्ता को यह इंगित करने के लिए कि पिछले 2 मार्गों का पहले ही दौरा किया जा चुका है, मूल रूप से ये 3 घटक सर्वेक्षण फॉर्म हैं, इसलिए उपयोगकर्ता अगले सर्वेक्षण फॉर्म में नहीं जा सकता जब तक कि वह पिछले वाले को भर देता है, जैसा कि आप चेकआउट पृष्ठ पर शॉपिंग साइटों में देखते हैं।) हालांकि मैं इसे कैसे पूरा करूं, मुझे पता है कि मेरे पास वर्तमान लिंक में सक्रिय वर्ग जोड़ा जा सकता है, लेकिन मैं पिछले को कैसे ट्रैक और हाइलाइट कर सकता हूं लिंक जब उपयोगकर्ता अगले लिंक पर जाता है?

3
Alexander Solonik 1 अप्रैल 2018, 00:26

2 जवाब

मुझे लगता है कि आप क्लासनाम पैकेज का उपयोग कर सकते हैं और ऑनक्लिक ईवेंट हैंडलर में विज़िट किए गए लिंक के लिए कक्षा को सत्य पर सेट कर सकते हैं। हालांकि यह रीलोड के दौरान जारी नहीं रहेगा। यदि आप चाहते हैं कि आपको सेटिंग को स्थानीय संग्रहण या कुछ और में सहेजना होगा।

0
M.Dewan 3 अप्रैल 2018, 07:22

यदि आप <NavLink> का उपयोग करते हैं और isActive प्रोप का उपयोग यह निर्धारित करने के लिए करते हैं कि एक निश्चित <NavLink> को सक्रिय के रूप में कब दिखाया जाना चाहिए, तो आपके पास सशर्त सक्रिय कक्षाएं हो सकती हैं।

इस मामले में, आपके पास केवल एक फ़ंक्शन हो सकता है जो जांचता है कि वर्तमान यूआरएल पिछले किसी से मेल खाता है या नहीं

// only consider a link active if its equal to or less than a certain url
const matchEvent = (match, location) => {
if (!match) {
    return false
}
const links = ["/", "/generalinfo", "/preferences"]
   return location.pathname <= links.indexOf(location.pathname)
}

<NavLink
  to="/generalinfo"
  isActive={matchEvent}
>General Info</NavLink>

उपरोक्त सिर्फ एक तरीके का एक उदाहरण है जिसे आप इसे पूरा कर सकते हैं, लेकिन आपको निश्चित रूप से कुछ ऐसा करना चाहिए जो उससे थोड़ा अधिक एक्स्टेंसिबल हो।

1
mootrichard 4 अप्रैल 2018, 15:50