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.

You can use the render prop of Route Component to Listen for route changes and rerender your nav to show the updates — AngelSalazar
– AngelSalazar, Commented Mar 14, 2018 at 22:17
@AngelSalazar Have you a code example for this? Using my code above. Also any input regarding the crashing? — dwalsh
– dwalsh, Commented Mar 14, 2018 at 22:19

dwalsh · Accepted Answer · 2018-03-20 22:31:31Z

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.

answered Mar 20, 2018 at 22:31

dwalsh

1451 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Issue with React Router and Semantic UI React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related