Question

我使用Semantic 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>
)

} }

Answer 1

我今天遇到了同样的问题，或者至少是类似问题。所以我通过将Link替换为NavLink并删除Semantic＆＃34; handleItemClick＆＃34;来解决我的问题。我们不需要Semantic来处理活动的Menu.Item，因为react-router可以使用NavLink执行此操作。

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

Answer 2

我们使用一个组件：

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

语义UI反应菜单指向不会更改路径更改时的活动状态

2 个答案: