Упростить элемент навигационной системы

Question

Как я могу упростить свой компонент навигационной навигации? Я сделал что-то вроде ниже, но он выглядит статическим, и я уверен, что было бы лучше.

class Nav extends React.Component { 
    logout(e) { 
     e.preventDefault(); 
     this.props.addFlashMessage({ 
      type: 'success', 
      text: 'You have been logged out successfully.' 
      }); 
     this.props.logout(); 
     } 

    render() { 
    const { isAuthenticated } = this.props.auth; 

    const {location} = this.props; 
    const homeClass = location.pathname === "/" ? true : false; 
    const about = location.pathname.match(/^\/about/) ? true : false; 
    const services = location.pathname.match(/^\/services/) ? true : false; 
    const loginClass = location.pathname.match(/^\/login/) ? true : false; 
    const signupClass = location.pathname.match(/^\/signup/) ? true : false; 

    const userLinks = (
     <Menu className="main-menu"> 
     <MenuItem isActive={homeClass}><Link to="/">Home</Link></MenuItem> 
     <MenuItem isActive={AboutClass}><Link to="/about">About</Link></MenuItem> 
     <MenuItem isActive={servicesClass}><Link to="/services">Services</Link></MenuItem> 
     <MenuItem><Link to="#" onClick={this.logout.bind(this)}>Logout</Link></MenuItem> 
     </Menu> 
    ); 

    const guestLinks = (
     <Menu className="main-menu"> 
     <MenuItem isActive={homeClass}><Link to="/">Home</Link></MenuItem> 
     <MenuItem isActive={AboutClass}><Link to="/about">About</Link></MenuItem> 
     <MenuItem isActive={servicesClass}><Link to="/services">Services</Link></MenuItem> 
     <MenuItem isActive={loginClass}><Link to="/login">Log in</Link></MenuItem> 
     <MenuItem isActive={signupClass}><Link to="/signup">Register</Link></MenuItem> 
     </Menu> 
    ); 

    return (
     <div className="main-nav"> 
      <Row> 
       <Link to="/" className="site-logo">My App</Link> 
       { isAuthenticated ? userLinks : guestLinks } 
      </Row> 
     </div> 
    ); 
    } 
} 

Я хочу сделать это более динамичным. Каков лучший способ сделать это? Я видел несколько примеров, но все были статическими ссылками, как в моем компоненте.

Большое спасибо за помощь.

Answer 1

Одна из идей было бы обернуть MenuItem компонент:

const MenuItemWrapper = (path, title) => 
<MenuItem isActive={location.pathname.startsWith('/' + path)}> 
    <Link to={path}>{title}</Link> 
</MenuItem> 

Таким образом, компонент может решить, если ссылка должна быть оказана active или нет.

На следующем шаге вы можете сохранить ссылки как объекты в массив и сгенерировать навигацию на основе этих данных:

const menuEntries = [ 
    { title: 'home', path: '/'}, 
    { title: 'about', path: '/about'}, 
    ... 
] 

const Links = menuEntries.map(e => 
    <MenuItemWrapper title={e.title} path={e.path} /> 
) 

Таким образом, ваше меню может быть упрощено до:

const guestLinks = (
    <Menu className="main-menu">{Links}</Menu> 
);