Navigation en-tête/pied de page problèmes de menu et routeur rea-routeur-dom et antd

Question

Je travaille sur une application reactjs - et j'ai créé deux menus - en-tête/pied de page - j'ai remarqué un bug sur le "actif" état lorsque je navigue sur les pages.

// Problèmes actuels

1. En arrivant sur la page d'accueil le lien à domicile est actif dans le menu d'en-tête, mais lorsque vous cliquez sur le menu Pied de page - vie privée - le lien de la vie privée est active, mais les liens d'en-tête sont également toujours actif quand ils devraient être désactivés.
2. En outre, lorsque vous vous rendez à une page qui n'existe pas, tapez/home2 - il devrait rebondir sur la page d'erreur mais ce n'est pas le cas - qu'est-ce qui interfère avec cela dans le routeur?

// Terre à la page d'accueil - page d'accueil est actif

// terre sur la vie privée - vie privée est active dans le pied - mais la page d'accueil dans l'en-tête est toujours actif.

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

Si vous utilisezVous pouvez utiliser NavLink. Il fournissant les activeClassName et activeStyle options pour ajouter classe et activeStyle

activeClassName

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

activeStyle

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

En outre, lorsque vous allez sur une page qui n'existe pas comme si vous tapiez/home2 - il devrait rebondir sur la page d'erreur mais ce n'est pas le cas - qu'est-ce qui interfère avec cela dans le routeur?

La question est ici:

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

Si aucun itinéraire correspondance, il se rendra à Login composant et non un composant Error

Vous devez ajouter exact-Route pour obtenir 404 comportement du composant Error.

Correct façon de faire cela.

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