我有3个组件使用React路由加载到主App.js compoenet中,如下所示：

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 } />

我有一个导航,如下所示：

导航代码如下：

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个组成部分是调查表,因此除非填写上一个,类似于您在结帐页面上的购物网站上看到的.)虽然我如何做到这一点,但我知道可以将活动类添加到当前链接中,但是如何跟踪和突出显示上一个用户移动到下一个链接时的链接？

解决方法:

要匹配先前的活动链接,您可以做的是存储匹配项,以实现可以将Navigation组件转换为有状态的组件,并将访问的链接存储为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;

导航：

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;