Question

我正在开发一个reactjs应用程序 - 我创建了两个菜单 - 页眉/页脚 - 当我浏览页面时，我注意到“活动”状态的错误。

//当前问题

当到达主页时，主页链接在标题菜单上处于活动状态，但是当点击页脚菜单 - 隐私时 - 隐私链接处于活动状态，但标题链接在它们应被停用时仍然有效。
当进入一个不存在的页面时，例如输入/ home2 - 它应该反弹到错误页面，但它没有 - 在路由器中干扰了什么？

//登陆主页 - 主页处于活动状态

//登陆隐私 - 页脚中的隐私已激活 - 但标题中的主页仍处于活动状态。

// Header.js

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { Row, Col, Menu, Icon, Alert } from 'antd'

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

// this is a class because it needs state
class Header extends Component {

  state = {
    current: 'home',
  }

  handleClick = (e) => {
    console.log('click ', e);
    this.setState({
      current: e.key,
    });
  }

  componentDidMount() {    

  }

  render() {
    return (
      <Menu
        onClick={this.handleClick}
        selectedKeys={[this.state.current]}
        mode="horizontal"
      >
        <Menu.Item key="home">
          <Link to="/home" rel="noopener noreferrer">Home</Link>
        </Menu.Item>
        <Menu.Item key="account">
          <Link to="/account" rel="noopener noreferrer">Account</Link>
        </Menu.Item>
      </Menu>
    )
  }
}

export default Header

// Footer.js

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { Row, Col, Menu, Icon, Alert } from 'antd'

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

// this is a class because it needs state
class Footer extends Component {

  state = {
    current: 'home',
  }

  handleClick = (e) => {
    console.log('click ', e);
    this.setState({
      current: e.key,
    });
  }

  componentDidMount() {    

  }

  render() {
    return (
      <Menu
        onClick={this.handleClick}
        selectedKeys={[this.state.current]}
        mode="horizontal"
      >
        <Menu.Item key="about">
          <Link to="/about" rel="noopener noreferrer">About</Link>
        </Menu.Item>
        <Menu.Item key="terms">
          <Link to="/terms" rel="noopener noreferrer">Terms of Service</Link>
        </Menu.Item>
        <Menu.Item key="privacy">
          <Link to="/privacy" rel="noopener noreferrer">Privacy Policy</Link>
        </Menu.Item>
      </Menu>
    )
  }
}

export default Footer

// router.js

import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom'
import createBrowserHistory from 'history/createBrowserHistory'
import { Provider } from 'react-redux'
import { createStore, compose } from 'redux'

// components
import Login from './components/Login/Login'

import Home from './components/Home/Home'
import Account from './components/Account/Account'

import About from './components/About/About'
import Terms from './components/Terms/Terms'
import Privacy from './components/Privacy/Privacy'

import Error from './components/Error/Error'

import Header from './components/Header/Header'
import Footer from './components/Footer/Footer'

const history = createBrowserHistory()

//const store = createStore(rootReducer, compose(
const store = createStore(compose(
  typeof window === 'object' && typeof window.devToolsExtension !== 'undefined' ? window.devToolsExtension() : (f) => f
  )
)

// we can pass the lang files as props to the routes
// we should have a nested route inside service here to show the other services page

class Routes extends Component {
  render () {
    return (
      <Provider store={store}>
        <Router history={history}>
          <div className='off-canvas-wrap' data-offcanvas>
            <div className='inner-wrap'>
              <Header transparent />
              <Switch>
                <Route path='/home' component={Home} />
                <Route path='/account' component={Account} />

                <Route path='/about' component={About} />
                <Route path='/terms' component={Terms} />
                <Route path='/privacy' component={Privacy} />

                <Route path='/login' component={Login} />
                <Route path='/' component={Login} />
                <Route component={Error} />
              </Switch>
              <Footer transparent />
            </div>
          </div>
        </Router>
      </Provider>
    )
  }
}

export default Routes

Answer 1

如果您使用react router 4

您可以使用NavLink。它提供了activeClassName和activeStyle添加选项 class和activeStyle

<强> activeClassName

<NavLink to="/about" activeClassName="selected">about </NavLink>

<强> activeStyle

<NavLink
  to="/about"
  activeStyle={{
    color: 'red'
   }}
>about</NavLink>

当进入一个不存在的页面时，如输入/ home2 - 它应该反弹到错误页面，但它没有 - 在路由器中干扰了什么？ < / p>

问题在于：

<Route path='/' component={Login} />

如果没有匹配的路由，它将呈现给Login组件而不是Error组件

您必须将exact添加到Route才能获得Error组件的404行为。

正确的方法。

<Route exact path='/' component={Login} />

Answer 2

问题出在您的 路由组件 中，此行出现问题：-

time

它必须像

compare

如果您不使用<Route path='/' component={Login} />属性，则每次它都与路由<Route exact path='/' component={Login} />匹配。因此，您需要添加exact关键字来避免此问题。

页眉/页脚导航react-router-dom和antd菜单和路由器问题

2 个答案: