react-router-dom#NavLink JavaScript Examples

StyledNavLink = styled(NavLink).attrs({
  activeClassName
})`
  ${({ theme }) => theme.flexRowNoWrap}
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  border: 1px solid ${({ theme }) => transparentize(1, theme.mercuryGray)};
  flex: 1 0 auto;
  border-radius: 3rem;
  outline: none;
  cursor: pointer;
  text-decoration: none;
  color: ${({ theme }) => theme.doveGray};
  font-size: 1rem;
  box-sizing: border-box;

  &.${activeClassName} {
    background-color: ${({ theme }) => theme.inputBackground};
    border-radius: 3rem;
    border: 1px solid ${({ theme }) => theme.mercuryGray};
    box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.shadowColor)};
    box-sizing: border-box;
    font-weight: 500;
    color: ${({ theme }) => theme.royalBlue};
    :hover {
      /* border: 1px solid ${({ theme }) => darken(0.1, theme.mercuryGray)}; */
      background-color: ${({ theme }) => darken(0.01, theme.inputBackground)};
    }
  }

  :hover,
  :focus {
    color: ${({ theme }) => darken(0.1, theme.royalBlue)};
  }
`

render() {
		return (
			<div className={`breadcrumbs ${this.props.address && this.props.address !== '' ? "breadcrumbs-address-tx" : null}`}>
				<div>
					<h1>{this.props.name}</h1>
					{this.props.address && this.props.address !== '' ? <span>{this.props.address}</span> : null}
				</div>
				<div>
					<p><NavLink to={this.props.parentLink}>{this.props.parentLinkName}</NavLink> <span className="noselect">/</span> {this.props.currentLinkName}</p>
				</div>
			</div>
		);
	}

render() {
		return (
			<NavLink to={`/drafts/${this.props.id}`} activeClassName="active-mail-item" className="mail-item">
				<h6>{this.props.to ? (<Address address={this.props.to} />) : ""}</h6>
				<span>{this.props.subject ? this.props.subject : "No Subject"}</span>
				<span>{this.props.body ? this.props.body : "No Body"}</span>
				<span>{this.props.timestamp ? moment(this.props.timestamp).fromNow() : ""}</span>
			</NavLink>
		);
	}

Navigation = ({ navigation }: Props) => (
  <nav role="navigation" className="nav nav__primary">
    <ul>
      {navigation &&
        navigation.map(item => (
          <li key={item.id} data-testid="item">
            <NavLink to={item.to} activeClassName="active">
              <span className="icon">
                <img
                  src={item.icon}
                  alt={item.id}
                  className="nav-icon"
                  width="24px"
                  height="20px"
                  style={{ width: '24px' }}
                />
              </span>
              <span className="label">{item.label}</span>
            </NavLink>
          </li>
        ))}
    </ul>
  </nav>
)

function ResumeCard(props) {
    return (
        <NavLink to={`/form/resume/${props.draftID}`}>
            <div className="resume-card">
                <h1>Resume Draft ID # {props.draftID}</h1>
            </div>
        </NavLink>
    );
}

ProductCard = (props) => {
  return (
    <NavLink to={`/product/${props.id}`}>
      <div className='cardWrapper'>
        <img
          className='cardImage'
          src={props.image[0]}
          alt={props.description}
        />
        <div className='textbox'>
          <h3>{props.productName}</h3>
          <p>${props.price}</p>
        </div>
      </div>
    </NavLink>
  );
}

NavLinks = styled(NavLink)`
  @media (min-width: 768px) {
    text-decoration: none;
    padding-bottom: 10%;
    color: black;
    margin-left: 3.5rem;
    font-size: 1.2rem;
    :hover {
      font-weight: 800;
      color: #277fe5;
      transition: 0.3s;
    }
    &.active {
      color: #277fe5;
      font-weight: 800;
    }
    :nth-child(7) {
      margin-top: 3rem;
    }
  }
`

Nav = () => {
  const element = useSelector(getElementData);
  const CurrentElement = elements.find(({ name }) => element === name);
  const history = useHistory();

  const handleClick = () => {
    history.push('/');
  };

  return (
    <nav>
      {CurrentElement && (
      <CurrentElement.Component
        className="logo"
        size="40"
        color={CurrentElement.color}
        onClick={handleClick}
      />
      )}
      <NavLink exact to="/">
        Home
      </NavLink>
      <NavLink to="/guides">Guides</NavLink>
      <NavLink to="/dailies">Dailies</NavLink>
      <NavLink to="/indispensables">Indispensables</NavLink>
      <NavLink to="/news">News</NavLink>
      <Theme />
    </nav>
  );
}

function AdminHeader() {
    const LINKS = [
        { url: '/cups', name: 'Coupes/Circuits' },
        { url: '/tournaments', name: 'Tournois' },
        { url: '/users', name: 'Utilisateurs' },
        { url: '/patch-notes', name: 'Patch notes' },
    ];

    return (
        <header className="header--admin">
            <Container>
                <Row justify="center">
                    {LINKS.map((link, index) => (
                        <Col
                            key={index}
                            xs="content"
                            className="adminHeader__navListItem"
                        >
                            <NavLink
                                to={`/admin${link.url}`}
                                activeClassName="header__smNavListItem--active"
                            >
                                {link.name}
                            </NavLink>
                        </Col>
                    ))}
                </Row>
            </Container>
        </header>
    );
}

Link = ({ children, to, className, noActiveStyle = false, onClick }) => {
  return (
    <NavLink
      to={to}
      activeClassName={noActiveStyle ? null : 'is-active'}
      className={className || 'navbar-item'}
      onClick={onClick}
      exact
    >
      {children}
    </NavLink>
  );
}

Choropleth = () => {

    return (
       <ChoroplethPage>
            <NavBar light/>
            <ContentContainer>
                <h1>Choropleth Maps</h1>
                <hr/>
                <p>
                    Choropleth maps use color to show the count or percentage of a variable.
                    <br/><br/>
                    The Atlas uses color to show the count and percentage of all coronavirus cases, daily new cases, deaths, and hospital beds. Use choropleth maps to see data about the virus on a particular day.
                    <br/><br/>
                    For more details on how the Atlas created the choropleth maps, please see the Methods page.
                </p>
                <Gutter h={40}/>
                <TutorialBox>

                <h2>FROM THE LEFT SIDEBAR</h2>
                <ul>
                    <li>The choropleth map is the default display for the atlas webpage. To return to the choropleth display, first select the data source and variable you would like to map.</li>
                    <li>Click on the Choropleth button.</li>
                    <li>Use the color ramp at the bottom of the screen to interpret the count or percentage for each county or state.</li>
                    <li>Brighter reds represent larger counts and percentages. Paler yellows represent smaller counts and percentages.</li>
                </ul>
                </TutorialBox>
                
                <Gutter h={40}/>
            <p>
                To explore changes over time use the <NavLink to="/time">Time slider.</NavLink> To explore emerging trends and patterns use the <NavLink to="/hotspot">Hotspot</NavLink> display.
                <br/><br/>
                
                <NavLink to="/faq">Back to Help Topics</NavLink>
            </p>
           </ContentContainer>
           <Footer/>
       </ChoroplethPage>
    );
}

render() {
    return (
        <div style={{ backgroundColor: '#393B44' }}>
          <div align={'center'} style={{ backgroundColor: '#24252B' }}>
            <Header inverted style={{ padding: '5rem 10rem 5rem 10rem' }} as={'h2'}>
              Before we move onto making your profile, we need to verify your age.
              <br/>
              Are you 18 or over?
              <br/>
              <Button as={NavLink} activeClassName="active" exact to={ROUTES.PARTICIPATION}
                  style={{ color: 'white', backgroundColor: '#393B44' }} content="Yes, I am." />
              <br/>
              <Button as={NavLink} activeClassName="active" exact to={ROUTES.UNDERAGE_PARTICIPATION}
                      style={{ color: 'white', backgroundColor: '#393B44' }} content="No, I am not." />
            </Header>
          </div>
        </div>
    );
  }

export default function About() {
	const { t } = useTranslation();
	return (
		<div className="about">
			<div className="banner">
				<Parallax
					className="parallax"
					blur={0}
					bgImage={bgImage}
					bgImageAlt=""
					strength={300}
				>
					<h1>{t("ABOUT.HEADER")}</h1>
				</Parallax>
			</div>

			<p>{t("ABOUT.INFO_1")}</p>
			<p>{t("ABOUT.INFO_2")}</p>
			<p>{t("ABOUT.INFO_3")}</p>
			<p>{t("ABOUT.INFO_4")}</p>

			<div className="ButtonDiv">
				<NavLink className="button" to="/students">
					{t("GENERAL.STUDENTS")}
				</NavLink>
				<NavLink className="button" to="/organizations">
					{t("GENERAL.ORGANIZATIONS")}
				</NavLink>
			</div>
		</div>
	);
}

Cardlist = ({ Joblist }) => {
  return (
    <div className="gridwraper">
      {Joblist.map((user, i) => {
        return (
          <>
            <Cards
              key={i}
              id={Joblist[i]._id}
              title={Joblist[i].job_title}
              content={Joblist[i].job_description}
              location={Joblist[i].location}
            />
          </>
        );
      })}
      <div className="card3 widths">
        <div className="card-body">
          <NavLink to="/addjobs">
            <FaRegPlusSquare className="addheight" />
          </NavLink>
        </div>
      </div>
    </div>
  );
}

AboutNavItem = ({label, to}) => {
    return (
        <li className='AboutNavItem'>
            <NavLink exact to={to} className='aboutLink' activeClassName='aboutLink-active'>
                <span style={style}>{label}</span>
            </NavLink>
        </li>
    );
}

NavLinkStyle = styled(NavLink)`
  width: 100%;
  height: 100%;
  padding-left: 27px;
  border-left: 2px solid transparent;
  display: flex;
  align-items: center;

  &.active {
    border-radius: 0px 10px 10px 0px;
    background-color: ${COLORS.REGULAR_PRIMARY};
    border-left-color: ${COLORS.PRIMARY};

    ${MenuText} {
      color: ${COLORS.PRIMARY};
      font-weight: 500;
    }

    svg {
      *[fill] {
        fill: ${COLORS.PRIMARY};
      }
      *[stroke] {
        stroke: ${COLORS.PRIMARY};
      }
    }
  }
`

SideNavLink = ({ name }) => {
  const goToLink = "/" + name;
  return (
    <li>
      <NavLink to={goToLink} className="">
        <span style={{ fontFamily: "Bungee" }}> {name.toUpperCase()} </span>
        <i className="small material-icons red-text">send</i>
      </NavLink>
    </li>
  );
}

HomeItem = ({ link, text }) => (
  <NavLink
    exact
    activeClassName='active'
    className='home-link nav-link'
    to={link}
  >
    <ListItem disablePadding>
      <ListItemButton style={{ paddingLeft: '8px' }}>
        <ListItemText className='menu-list-text' primary={text} />
      </ListItemButton>
    </ListItem>
  </NavLink>
)

Navigation = () => {

  const tmpStyle = {
    position:'fixed',
    zIndex:1100,
    right:0,
    left:0,
  };

  return (
    <div style={tmpStyle}>
      <Navbar bg="info" variant="dark">
        <Navbar.Brand>React Integration Examples</Navbar.Brand>
        <Navbar.Toggle target="nav-collapse"></Navbar.Toggle>
        <Navbar.Collapse id="nav-collapse" is-nav="true">
          <Nav>
            <NavLink activeClassName="router-link-active" className="nav-link" to="/">Report Skill Events</NavLink>
            <NavLink activeClassName="router-link-active" className="nav-link" to="/showSkills?isSummaryOnly=false&internalBackButton=false&themeName=Bright%20(default)&skillsVersion=">User Display</NavLink>
          </Nav>
        </Navbar.Collapse>
          <Button variant="primary">
              <SkillsLevel />
          </Button>
      </Navbar>
    </div>
  );
}

Navbar = () => (

  <div className="nav">
    <img className="img"  alt='logo' />
    <ul className="nav-menu">
        <li><NavLink className="nav-menu__link" exact to="/">Home</NavLink></li>
        <li><NavLink className="nav-menu__link" to="/account">Account</NavLink></li>
        <li><NavLink className="nav-menu__link" to="/logout">Log out</NavLink></li>
    </ul>
  </div>
)

ScrollToTopLink = ({ useNavLink, scrollToTop = true, ...props }) => {
  let { to } = props
  if (typeof to === 'string') {
    to = { pathname: to, state: { scrollToTop } }
  }
  if (useNavLink) {
    return <NavLink {...props} to={to} />
  }
  return <Link {...props} to={to} />
}

function AppFooter() {
  const location = useLocation();

  return (
    <footer className="pb-6 mt-6 text-center">
      { location.pathname === "/" ? (
        <NavLink
          to="/about"
          className="transition duration-500 ease-in-out text-gray-800 border-b border-gray-800 hover:text-gray-500 hover:border-gray-500"
          data-testid="footer-about-link"
        >
          About
        </NavLink>
      ) : (
        <p>Made by <a className="transition duration-500 ease-in-out font-medium text-pink-600 hover:text-pink-500" href="https://phixyn.com/" target="_blank">Phixyn</a></p>
      )}

    </footer>
  )
}

SettingsPage = () => (
  <Fragment>
    <MobileHeader backArrow>
      <h3 className="heading-3">Edit Profile</h3>
      <div></div>
    </MobileHeader>
    <main className="settings-page grid">
      <Card className="settings-card">
        <ul className="settings-card__sidebar">
          <NavLink
            className="sidebar-link"
            to="/settings/edit"
            activeClassName="font-bold sidebar-link--active"
          >
            <li className="sidebar-link__text">Edit Profile</li>
          </NavLink>
          <NavLink
            className="sidebar-link"
            to="/settings/password"
            activeClassName="font-bold sidebar-link--active"
          >
            <li className="sidebar-link__text">Change Password</li>
          </NavLink>
        </ul>
        <article className="settings-page__content">
          <Switch>
            <ProtectedRoute path="/settings/edit">
              <EditProfileForm />
            </ProtectedRoute>
            <ProtectedRoute path="/settings/password">
              <ChangePasswordForm />
            </ProtectedRoute>
          </Switch>
        </article>
      </Card>
    </main>
  </Fragment>
)

NavBar = () => {
  return (
    <ul>
      <li>
      <Link to="/">Home</Link>
        {/* <a href="/">Home</a> */}
      </li>
      <li>
      <NavLink activeClassName="active"  to="/products">Products</NavLink>
        {/* <a href="/products">Products</a> */}
      </li>
      <li>
      <Link to="/posts/2020/08">Posts</Link>
        {/* <a href="/posts/2018/06">Posts</a> */}
      </li>
      <li>
      <Link to="/admin">Admin</Link>
        {/* <a href="/admin">Admin</a> */}
      </li>
    </ul>
  );
}

AuthenticatedUserDisplay = ({ setIsLoggedIn }) => {
  const onLogoutClick = () => setIsLoggedIn(false);
  return (
    <div className="db dtc-l v-mid w-100 w-75-l tc tr-l">
      <ul className="ul">
        <li className="li">
          <NavLink
            exact
            to="/"
            className="link dim dark-gray pa3 f6 f6-l dib mr0 mr0-l pointer"
          >
            Home
          </NavLink>
        </li>
        <li className="li">
          <NavLink
            exact
            to="/"
            className="link dim dark-gray pa3 f6 f6-l dib mr0 mr4-l pointer"
            onClick={onLogoutClick}
          >
            Logout
          </NavLink>
        </li>
      </ul>
    </div>
  );
}

export function AnchorLink({
  staticContext,
  to,
  exact,
  style,
  activeStyle,
  children
}) {
  let history = useHistory();
  let href = history.createHref(typeof to === 'string' ? { pathname: to } : to);
  let match = useRouteMatch({ path: to, exact: true });

  return (
    <NavLink
      to={to}
      exact={exact}
      {...css([styles.smallText, style, match ? activeStyle : null])}
    >
      {children}
    </NavLink>
  );
}

function NavItem({ name, iconClassName, linkTo }) {
  return (
    <li className='nav-item'>
      <NavLink exact to={linkTo} className='nav-link' activeClassName='active'>
        <span>
          {iconClassName && <i className={`me-2 ${iconClassName}`} />}
          {name}
        </span>
      </NavLink>
    </li>
  );
}

BottomNavLink = (props) =>{

    return(
        <li className="flex flex-1 transition-all w-2/12 delay-150 text-center text-gray-400 dark:text-gray-400 focus:outline-none text-sm" >
            <NavLink 
            className="flex flex-col space-y-2 w-full h-full"
            exact={props.path==='/'} 
            aria-label={props.title} 
            to={props.path}
            activeClassName="text-black dark:text-white border-b-2 border-primary">
                <div className="flex flex-col my-auto space-y-1">
                    <span className="text-lg">{props.icon}</span>
                    <span className="">{props.title}</span>
                </div>
            </NavLink>
        </li>
    )
}

SideBar = (props) => {
    const Tabs = props.data && Object.keys(props.data);
    const List = Tabs.map(list => {
        return (
            <Li key={list}>
                <NavLink to={`/${list.toLowerCase()}`} activeClassName="active">{list}</NavLink>
            </Li>
        )
    });        
    return (
        <Wrapper>
            <Label>Explorer</Label>
            <Ul>
                {List}
            </Ul>
        </Wrapper>
    )
}