проблема с пунктом меню Semanti c, активным с NavLink - PullRequest
0 голосов
/ 13 июля 2020

Я использую response-semanti c -ui и React-Router-Dom для маршрутизации, а в пункте меню - NavLink для перенаправления. Но по умолчанию элемент меню «Главная» активен, когда страница загружена, но не отображает домашнюю страницу, указанную в Router, но после нажатия на элемент меню отображается домашняя страница.

Вот мой NavBar код:


    import React, {Component} from 'react';
    import {NavLink, Redirect} from 'react-router-dom'
    import { Menu,  Responsive,  Button,  Icon } from 'semantic-ui-react'
    
    class NavBar extends Component {
      constructor(props){
        super(props)
        this.state = {
          activeItem: 'home' 
        }
      }
    
      handleItemClick = (e, { name }) => {
        this.setState({ activeItem: name })
      }
      render() {
        const { activeItem } = this.state
        return(
          <div>
           <Menu inverted style={{
            borderRadius: 0,
            borderBottom: '2px solid #fff',
            fontSize: '1.2rem',
            }} >
            <Menu.Item 
              name='home'
              active={activeItem === 'home'}
              onClick={this.handleItemClick}
              as = {NavLink} exact to='/home'
            />
            <Menu.Item 
              name='users'
              active={activeItem === 'users'}
              onClick={this.handleItemClick}
              as = {NavLink} exact to='/users'
            />
            <Menu.Menu position='right'>
            <Menu.Item 
              name='log Out'
              active={activeItem === 'logout'}
              onClick={this.handleItemClick}
            />
            </Menu.Menu>
          </Menu>
          </div>
        );
      }
    }
    
    export default NavBar;

А вот маршрутизаторы в UploadScreen.js:


    render() {
      return (
        <div> 
          <BrowserRouter>
            <NavBar/>
            <Switch>
              <Route excat path="/home" component={Home}/>
              <Route exact path="/unauth" component={UnAuth} />
              <Route path ="/users" component = {ListUserComponent}/>
              <Route path ="/add-user" component = {AddUserComponent}/>
              <Route path="/logout" component={Logout}/>
            </Switch>
            </BrowserRouter> 
        </div>
      );
    }

На изображениях ниже текст приветствия находится на домашней странице, он отображается после того, как я нажимаю на дом, мне нужно он отображается, когда по умолчанию в качестве активного элемента меню находится элемент дома:

[it's displaying like this with blank Page][

enter image description here] 2

...