React 路由器和语义 UI React 的问题答案

【问题标题】：Issue with React Router and Semantic UI ReactReact 路由器和语义 UI React 的问题
【发布时间】：2018-08-23 14:32:38
【问题描述】：

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

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

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

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

“App.jsx”渲染返回是这样的：

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

这就是问题所在。当我启动我的应用程序时，它工作正常，显示“主页”，但是当我单击菜单中的链接时，应用程序崩溃。

关于如何解决这个问题的任何想法？我还希望“isActive”将使用菜单中的当前路线进行更新。

任何意见将不胜感激。

【问题讨论】：

您可以使用 Route 组件的 render prop 来监听路由变化并重新渲染您的导航以显示更新
@AngelSalazar 你有这方面的代码示例吗？使用我上面的代码。还有关于崩溃的任何输入吗？
youtube.com/watch?v=HPtrWtn5FpU 看看这个
那个视频应该能解决你的问题

标签： javascript reactjs react-router semantic-ui-react

【解决方案1】：

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

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

似乎少做多。希望这对任何人都有帮助。

【讨论】：