Проблема с Menu.Item NavLink всегда активен Semantic UI React

Я использую семантическую реакцию пользовательского интерфейса, и я использую NavLink с Menu.Item для маршрутизации.

Ниже мой компонент навигационной панели:

const Navbar = () => (
  <div>
    <Container>
      <Menu secondary stackable widths={4}>
        <Menu.Item>
          <img src={Logo} alt="header" />
        </Menu.Item>
        <Menu.Item as={NavLink} to="/" name="home">
          <Icon name="home" size="large" />
          <p>Home</p>
        </Menu.Item>
        <Menu.Item as={NavLink} to="/data" name="data">
          <Icon name="dashboard" size="large" />
          <p>Dashboard</p>
        </Menu.Item>
        <Menu.Item as={NavLink} to="/user" name="user">
          <Icon name="user" size="large" />
          <p>User</p>
        </Menu.Item>
      </Menu>
    </Container>
  </div>
);

Вот в чем проблема. Маршрутизация работает нормально, но по какой-то причине пункт меню «Домой» всегда активен.

Однако два других маршрута работают нормально (т. Е. Активны только тогда, когда маршрут правильный).

Вот как это выглядит с активным маршрутом / dashboard

Код для маршрутов в моем App.jsx:

<Switch>
    <Route exact path="/" component={Home} />
    <Route path="/data" component={Dashboard} />
    <Route path="/user" component={User} />
</Switch>

Фотография выше должна дать вам четкое представление о проблеме!

Любой вклад будет оценен !!


reactjs react-router semantic-ui-react semantic-ui
person dwalsh    schedule 20.03.2018    source источник
comment
‹Menu.Item as = {NavLink} точно to = / name = home› добавить exact prop в свой пункт меню   -  person AngelSalazar    schedule 21.03.2018
comment
@AngelSalazar Спасибо, мой друг только что столкнулся с таким поведением! И вы это решили!   -  person Antonio Pavicevac-Ortiz    schedule 06.11.2019

Ответы (2)


arrow_upward
5
arrow_downward

Могу подтвердить, что от AngelSalazar выше, это исправляет. Спасибо!

<Menu.Item as={NavLink} exact to="/" name="home">
person dwalsh    schedule 20.03.2018
comment
Это работает для меня только в том случае, если состояние компонента Navigation установлено в MapStateToProps, это не должно быть так, верно? - person Miguel Stevens; 14.05.2018

arrow_upward
0
arrow_downward

Вот установка, которая помогла мне решить эту проблему. Я получал следующую ошибку:

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.
in a (created by Link)
in Link (created by Route)
in Route (created by NavLink)
in NavLink (created by MenuItem)
in MenuItem (at NavBar.js:47)
in a (created by Link)
in Link (created by Route)
in Route (created by NavLink)
in NavLink (at NavBar.js:46)
in div (created by Menu)
in Menu (at NavBar.js:20)
in NavBar (at App.js:26)
in div (at App.js:25)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:24)
in div (at App.js:22)
in App (at index.js:6)

Основная настройка компонентов была в App.js, где я выполнял свою маршрутизацию.

 <Router>
      <div>
      <NavBar />
      <Route exact path="/" component={LoginSignUpContainer}></Route>
<Router>

Здесь у меня есть компонент NavBar, который содержит информацию о том, где у меня возникла проблема.

class NavBar extends Component{
 constructor(){
    super();

    this.state={
        activeItem: "home"
    }
}
handleItemClick = (e, { name }) => this.setState({ activeItem: name })


render() {
const { activeItem } = this.state

return (
  <Menu>
     <NavLink to="/bills">
    <Menu.Item
      name='bills'
      active={activeItem === 'bills'}
      onClick={this.handleItemClick}>
      <Icon name="payment"/>Bills
    </Menu.Item>

  <Menu>

Я удалил теги NavLink и добавил в теги Menu.Item:

 as={NavLink}
 to="bills"

После обновления:

<Menu.Item
    as={NavLink}
    to="/bills"
    name='bills'
    active={activeItem === 'bills'}
    onClick={this.handleItemClick}>
  <Icon name="payment"/>Login
</Menu.Item>
person Roger Perez    schedule 20.06.2018