How to highlight previous links when user moves to the next link?

Question

I have 3 components that load in the main App.js compoenet using react routes, like so:

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;

As you can see the following 3 components are loaded , depending on the url you hit in the browser:

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

I Have a navigation that looks like below:

The navigation code is below:

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;

Now what i would like to do is , say the user is on the 3rd component and final component, So say the user is on the following route:

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

I would like the navigation to highlight the previous 2 links , (to indicate to the user that the previous 2 routes have already been visited, basically these 3 components are survey forms , so the user can't move to the next survey form unless he fills out the previous one's , something like what you see in shopping sites on the checkout page.) How do i accomplish this though , i know i can have the active class added to the current link , but how do i track and highlight the previous links when the user moves to the next link ?

Answer 1

What you can do to match the previous active link is to store the matches, to achieve that you can convert the Navigation component to a stateful component and store the visited links in state

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;

Navigation:

class Navigation extends React.Component {
    state = {
        activeLink: []
    }
    handleClick = (path) => {
        if(!this.state.activeLink.includes(path)) {
           this.setState(prevState => ({ activeLink: [...prevState.prevState, path ] }))
        }
    }
    render(){
        const ACTIVE = { background: '#286090', color: '#fff'}
        const { activeLink } = this.state;
        return (
            <nav className={ classes.main__site__navigation }>
                <ul>
                    <li>
                        <Link to="/"  onClick={() => this.handleClick('/')} className={ activeLink.includes("/") ? classes.active: '' } >
                            1
                        </Link>
                    </li>
                    <li>
                        <Link to={{
                                pathname : '/generalinfo'
                            }}
                            className={ activeLink.includes("/generalinfo") ? classes.active: '' }
                            onClick={() => this.handleClick('/generalinfo')}
                        >
                            2
                        </Link>
                    </li>
                    <li>
                        <Link to={{
                                pathname : '/preferences'
                            }}
                            onClick={() => this.handleClick('/preferences')} 
                            className={ activeLink.includes("/preferences") ? classes.active: '' }
                    >
                            3
                        </Link>
                    </li>
                </ul>
            </nav>
        );
    }

}

export default Navigation;