标签：reactjs javascript

我有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;

标签：reactjs,javascript
来源： https://codeday.me/bug/20191109/2011941.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。