Issue with React Router and Semantic UI React

Question

I am new to ReactJS and have an issue with using "Menu.Item" (from Semantic UI React) and React Router.

My imports etc will be left out of the below code but they are all working fine.

My "App.jsx" constructor is as follows:

constructor(props) {
    super(props);
    this.state = {
      activeItem: 'home',
      loading: true,
      messages: [],
    };
  }

The "App.jsx" render return is this:

<Router>    
<Container className="main">
            <Navbar
              onItemClick={selected => this.setState({ activeItem: selected })}
              isActive={this.state.activeItem}
            />
            <Container className="main-content">
              <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/dashboard" component={Dashboard} />
                <Route path="/user" component={User} />
              </Switch>
            </Container>
          </Container>
</Router>

For clarification, the Home, User, and Dashboard components are just simple Div's that has their respective names in them.

My Navbar is as follows:

class Navbar extends Component {
  onItemChange = (e, { name }) => this.props.onItemClick(name);
  render() {
    return (
      <div>
        <Container>
          <Menu secondary stackable widths={4}>
            <Menu.Item>
              <img src={Logo} alt="header" />
            </Menu.Item>
            <Menu.Item
              as={NavLink}
              to="/"
              name="home"
              active={this.props.isActive === 'home'}
              onClick={(event, name) => this.handleClick(name.name, name.to)}
            >
              <Icon name="home" size="large" />
              <p>Home</p>
            </Menu.Item>
            <Menu.Item
              as={NavLink}
              to="/dashboard"
              name="Data"
              active={this.props.isActive === 'Data'}
              onClick={this.onItemChange}
            >
              <Icon name="dashboard" size="large" />
              <p>Dashboard</p>
            </Menu.Item>
            <Menu.Item
              as={NavLink}
              to="/user"
              name="user"
              active={this.props.isActive === 'user'}
              onClick={this.onItemChange}
            >
              <Icon name="user" size="large" />
              <p>User</p>
            </Menu.Item>
          </Menu>
        </Container>
      </div>
    );
  }
}

As you can see from the above Navbar, I am using NavLink within the Menu.Item.

Here is where the issue arises. When I start my application it works fine, 'home' is displayed, however when I click on a link in the Menu, the application crashes.

Any ideas on how to fix this? I also want to have it that the 'isActive' will update with the current route in the menu.

Any input would be greatly appreciated.

Answer 1

I fixed it for anyone looking into it by simplifying the code, here is the Navbar component:

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>
);

Less does more, it seems. Hope this helps anyone.