2

Я использую react-router-dom v4. У меня есть компонент меню, и мне нужно при помощи css выделять нужный пункт в зависимости от того где на данный момент находится пользователь. К примеру он может находиться на /additem, тогда мне надо выделить именно этот пункт меню. У меня в css будет два id для выделенного и не выделенного пункта меню. И вот мне надо в зависимости от совпадения местоположения роутера и пункта меню менять id стиля в элементе li

Вот код компонента:

import React, {Component} from 'react';
import {Link} from "react-router-dom";


export default class TabMenu extends Component {

    render() {

        return (
            <div id="main-tabs">
                <ul>
                    <li>
                        <Link to={'/additem'}>Gegenstand hinzufügen</Link>
                    </li>
                    <li>
                        <Link to={'/processitem'}>Prozesselement</Link>
                    </li>
                    <li>
                        <Link to={'/cargodocs'}>Frachtdokumente</Link>
                    </li>
                    <li>
                        <Link to={'/statistics'}>Statistiken</Link>
                    </li>
                </ul>

            </div>
        );
    }
}

1 ответ 1

1

Используйте withRouter из react-router-dom. Как-то так:

import React, { Component } from 'react';
import { Link, withRouter } from 'react-router-dom';


class TabMenu extends Component {

    render() {
        const { location } = this.props
        const currentPath = location.pathname
        return (
            <div id="main-tabs">
                <ul>
                    <li>
                        <Link className={currentPath.search('/additem') ? 'active' : ''} to={'/additem'}>Gegenstand hinzufügen</Link>
                    </li>
                    .....
                </ul>

            </div>
        );
    }
}

export default withRouter(TabMenu)

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.