Я использую 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>
);
}
На изображениях ниже текст приветствия находится на домашней странице, он отображается после того, как я нажимаю на дом, мне нужно он отображается, когда по умолчанию в качестве активного элемента меню находится элемент дома:
[][
] 2