React Router 和 Semantic UI React 问题

Question

我是 ReactJS 的新手，在使用 "Menu.Item"（来自 Semantic UI React）和 React Router 时遇到问题。

我的导入等将被排除在下面的代码之外，但它们都工作正常。

我的"App.jsx"构造函数如下：

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

"App.jsx"渲染return是这样的：

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

为澄清起见，Home、User 和 Dashboard 组件只是简单的 Div，其中包含各自的名称。

我的导航栏是这样的：

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

从上面的导航栏可以看出，我在Menu.Item内使用了NavLink。

问题就出在这里。当我启动我的应用程序时它工作正常，显示 'home'，但是当我单击菜单中的 link 时，应用程序崩溃。

关于如何解决这个问题有什么想法吗？我还想让 'isActive' 将更新为菜单中的当前路线。

如有任何意见，我们将不胜感激。

Answer 1

我通过简化代码为任何研究它的人修复了它，这是 Navbar 组件：

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

看来，少即是多。希望这对任何人都有帮助。

React Router 和 Semantic UI React 问题

Issue with React Router and Semantic UI React

javascript

reactjs

react-router

semantic-ui-react