Question

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

我希望导航突出显示前两个链接，（向用户表明前两条路线已经被访问过，基本上这3个组件都是调查表格，因此用户无法进入下一个调查形式，除非他填写前一个，就像你在结帐页面上的购物网站上看到的那样。）我如何实现这一点，我知道我可以将活动类添加到当前链接，但我如何跟踪和当用户移动到下一个链接时突出显示以前的链接？

Answer 1

与前一个活动链接相匹配的是存储匹配项，以实现可以将导航组件转换为有状态组件并将访问过的链接存储在状态

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;

Answer 2

如果您使用<NavLink>并使用isActive支柱确定某个<NavLink>何时应显示为有效，则可以设置条件有效课程。

在这种情况下，您可以使用一个函数来检查当前url是否与之前的url匹配以确定

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

上面只是你可以实现它的一种方式的一个例子，但是你应该做一些比这更具可扩展性的事情。

Answer 3

我认为您可以使用classnames包并在onClick事件处理程序中将访问链接的类设置为true。但这并不会在重新加载时持续存在。如果您需要，则需要将设置保存到本地存储或其他内容。

当用户移动到下一个链接时，如何突出显示以前的链接？

3 个答案: