语义 UI React 菜单指向不会在路由更改时更改活动状态

Question

我使用语义在 React 中构建了小型 SPA UI React。菜单正常工作，当我单击任何菜单项时，它会将我带到它应该去的地方。

问题是，如果我转到 page/Route 并从那里将我的 page/Route 更改为另一个，指向菜单中的活动字段仍指向上一页。

一切都按照应有的方式导入。我只想找到让我的菜单始终指向当前显示的适当路线的方式。

这是我的代码：

render() {

const { activeItem } = this.state

return (
  <div>
      <BrowserRouter>
        <div>
          <Menu pointing>
            <Menu.Item name='Home' as={Link} to='/home' active={activeItem === 'Home'} onClick={this.handleItemClick} />
            <Menu.Item name='Regions' as={Link} to='/regions' active={activeItem === 'Regions'} onClick={this.handleItemClick} />
            <Menu.Item name='Countries' as={Link} to='/countries' active={activeItem === 'Countries'} onClick={this.handleItemClick} />
            <Menu.Item name='AllCountries' as={Link} to='/allcountries' active={activeItem === 'AllCountries'} onClick={this.handleItemClick} />
            <Menu.Menu position='left'>
              <Menu.Item>
                <Form.Group onSubmit={this.submit}>
                  <Input placeholder='Search...' value={this.state.searchTerm} onChange={this.takeTerm} onKeyPress={this.showData}/>
                  <Link to="/countrydata"><Button type="submit" circular icon="search" /></Link>
                </Form.Group>
              </Menu.Item>
            </Menu.Menu>
            <Button.Group>
              <Button>English</Button>
              <Button.Or text="or"/>
              <Button>Francais</Button>
              <Button.Or text="or"/>
              <Button>Italiano</Button>
            </Button.Group>
          </Menu>
          <Segment>
          <Switch>
            <Route path="/regions" component={Regions}/>
            <Route path="/countries" component={Countries}/>
            <Route path="/allcountries" component={AllCountries}/>
            <Route path="/countrydata" component={Country} />
            <Route path="/" component={Home} />
          </Switch>
          </Segment>
          {this.state.notFound ? (<div className="showError">Searched country does not exist</div>) : <div></div>}
        </div>
      </BrowserRouter>
  </div>
)

} }

Answer 1

我们使用一个组件：

const MenuLink = ({ to, exact, ...rest }) => (
  <Route path={to} exact={exact} children={({ match }) => (
    <Link to={to}><Menu.Item active={!!match}{...rest} /></Link>
  )} />
);

Answer 2

我今天遇到了同样的问题，或者至少是类似的问题。所以我通过用 NavLink 替换 Link 并删除语义的 "handleItemClick" 来解决我的问题。我们不需要语义来处理活动 Menu.Item 因为 react-router 可以用 NavLink.

<Menu.Item name='Countries' as={NavLink} to='/countries' />

语义 UI React 菜单指向不会在路由更改时更改活动状态

Semantic UI React Menu pointing won't change active state on Route change

reactjs

react-router-redux

semantic-ui-react