简化React导航组件

Question

How can I simplify my react navigation component? I creaded something like below, but it looks to static and I'm sure it would be better.

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

I want to do this more dynamic. What's the better way to do this ? I saw some examples but all were static links like in my component.

Many thanks for help.

Answer 1

One idea would be to wrap your MenuItem component:

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

Thus the component could decide if the link should be rendered active or not.

In the next step you could store the links as objects in an array and generate your navigation based on this data:

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

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

Thus your menu could be simplified to:

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