代码之家 › 专栏 › 技术社区 › Lazar Nikolic

语义用户界面反应菜单指向不会更改路由更改的活动状态

semantic-ui-react react-router-redux reactjs

1

Lazar Nikolic · 技术社区 · 7 年前

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

问题是,如果我转到一个页面/路径,然后从那里将我的页面/路径更改为另一个页面/路径,则“定点”菜单中的活动字段将保持指向上一页。

一切都是按它应该的方式进口的。我只是想找到一种方法,让我的菜单始终指向当前显示的适当路径。

这是我的代码:

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

} }

2 回复 | 直到 7 年前

1

4

beba 6 年前

我今天也有同样的问题,或者至少是类似的问题。所以我解决了我的问题,用NavLink替换Link,并删除了Semantic的“handleItemClick”。我们不需要语义来处理活动菜单。项目,因为反应路由器可以做到这一点与导航链接。

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

2

0

malix 7 年前

我们使用一个组件:

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