Semantic UI React Menü zeigt nicht ändern aktiven Zustand auf Route ändern

Question

Ich habe kleine SPA in Reagieren mit Semantic UI React. Das Menü funktioniert so wie es sollte und wenn ich auf einen der Menüpunkte klicke, bringt es mich dorthin, wo es hingehört.

Das Problem ist, dass, wenn ich auf eine Seite/Route gehe und von dort ändern meine Seite/Route zu einem anderen, aktive Feld im Zeige-Menü auf die vorherige Seite zeigt.

Alles wird importiert, wie es sollte. Ich möchte nur den Weg für mein Menü finden, um immer auf die entsprechende Route zu zeigen, die gerade angezeigt wird.

Hier ist mein Code:

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

Ich hatte das gleiche Problem heute oder zumindest eine ähnliche. Also löste ich mein Problem, indem ich Link durch NavLink ersetzte und Semantic's "handleItemClick" entfernte. Wir brauchen Semantic nicht, um aktive Menu.Item zu verarbeiten, da react-router dies mit NavLink machen kann.

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

Answer 2

Wir verwenden eine Komponente:

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