Добавление активного класса для реагирования на боковой панели

Question

Я пытаюсь добавить 'active' как className для каждого компонента в боковой панели. Я хочу, чтобы в зависимости от того, что активировалось, к нему должен был присоединяться класс 'active', а затем соответственно устанавливаться CSS. Я попытался использовать реквизиты для определения местоположения реагирующего маршрутизатора, ссылаясь на этот ответ SO: https://stackoverflow.com/a/42766792/11349591,, но не смог правильно выполнить синтаксис / результат.

Вот мой код для Sidebar.js

import React, {Component} from 'react'
import { NavLink, Link } from 'react-router-dom'
import '../../css/active.css';


export default function SideBar(){
    const { location } = this.props;

    const dashboardClass = location.pathname === "/" ? "active" : "";
    const userClass = location.pathname.match(/^\/user/) ? "active" : "";
    const listClass = location.pathname.match(/^\/list/) ? "active" : "";
        return (
            <div style={{flexBasis: '200px', backgroundColor: 'gray'}}>
                <nav style={{textAlign:'left'}}>
                    <ul className="side-bar">
                        <li className={dashboardClass}>
                            <i class="fa fa-pie-chart fa-2x" aria-hidden="true" style={{color:'#ccc'}}></i>
                            <Link to="/dashboard">
                                Dashboard
                            </Link>
                        </li>
                        <li className={userClass}>
                            <i class="fa fa-user-circle fa-2x" aria-hidden="true" style={{color:'#ccc'}}></i>
                            <Link to="/user" >User</Link>
                        </li>
                        <li className={listClass}>
                            <i class="fa fa-list-alt fa-2x" aria-hidden="true" style={{color:'#ccc'}}></i>
                            <Link to="/list">Table List</Link>
                        </li>
                    </ul>
                </nav>
            </div>
        )
}

App.js (Боковая компонента рендеринга компонента и компонент Dashboard)

function App() {
  return (
    <div className="App">
      <Switch>
          <Route exact path="/" component={Home} />

          <Route path="/register" component={Register} />

          <Route path="/login" component={Login} />
      </Switch>
    </div>
  );
}

Home.js

export default class Home extends Component {
    render() {
        return (
            <div style={{display: 'flex', flexDirection: 'row'}}>
                <SideBar/>
                <Dashboard/>
            </div>
        )
    }
}

Моя консоль сообщает об этой проблеме: Ошибка типа: Невозможно прочитать свойство 'props' из неопределенного

Answer 1

Чтобы активировать навигационную ссылку, вы должны использовать NavLink вместо Link. NavLink имеет одно свойство с именем activeClassName, к нему следует применить этот класс. скажем, если у вас есть класс с именем active, который вы хотите применить после нажатия на него, то вы можете сделать это.

<NavLink to="/user" activeClassName={classes.active}>
    <li className={dashboardClass}>
       <i class="fa fa-pie-chart fa-2x" aria-hidden="true" style={{color:'#ccc'}}></i>
    </li>
</NavLink>

Answer 2

Вы пытаетесь получить доступ к this.props из функционального компонента, и это возможно только в компонентах на основе классов. Измените свой код следующим образом:

export default function SideBar({ location }){
   // Rest of the code

Вам также необходимо передать реквизиты маршрутизатора с Home до Sidebar компонента:

export default class Home extends Component {
    render() {
        return (
            <div style={{display: 'flex', flexDirection: 'row'}}>
                <SideBar {...this.props}/> // Pass the props down
                <Dashboard/>
            </div>
        )
    }
}