react-router-dom#Link TypeScript Examples

function AppCard (props: IAppCardProps) {
  const { app } = props;
  const [dropDownState, setDropdownState] = useState( false );

  return (
    <>
      <Card isHoverable isRounded className="app-card">
        <section className="app-card--body">
          <Link to={app.appId}><Title headingLevel='h2'>{ app.name }</Title></Link>
          <p className="app-card--body__description">{ app.description }</p>
        </section>
        <aside className="app-card--dropdown">
          <Dropdown
            toggle={ <KebabToggle onToggle={ () => setDropdownState( !dropDownState) } /> }
            isOpen={ dropDownState }
            isPlain
            dropdownItems={ props.dropdownItems }
            position={ 'right' }
          />
        </aside>
        <footer className="app-card--footer pf-u-display-flex pf-u-justify-content-space-between">
          <p>Path: <strong>{ app.path }</strong></p>
          <a href={ app.path } title={ app.name } rel="noopener">
            View App
            <ion-icon class="ion-icon" name="open-outline"></ion-icon>
          </a>
        </footer>
      </Card>
    </>
  );
}

LoginButton = () => {
	const [user] = useUser()
	if (user) {
		return (
			<AccountCircle />
		)
	} else {
		return (
			<Button variant='contained' color='primary' size='small' component={Link} to='/login'>Login</Button>
		)
	}
}

NotFound: React.FC<{}> = () => {
  return (
    <div className="page-error">
      <div className="flex-error">
        <div className="title">404</div>
        <div className="info">这个页面不存在</div>
        <Button size="large">
          <Link to="/home">返回首页</Link>
        </Button>
      </div>
      <img src={require("src/assets/img/error.gif")} alt="error" />
    </div>
  );
}

NavLink = styled(Link)`
  display: block;
  font-size: 1rem;
  margin-bottom: 0.625rem;
  transition: all 0.2s ease-in-out;

  &:hover,
  &:active,
  &:focus {
    color: #15418e;
  }
`

function NavMenu({ to, title }: RouteMenu) {
  const match = useMatch({
    path: to,
  });

  return (
    <div data-active={!!match}>
      <Link to={to}>{title}</Link>
    </div>
  );
}

AppBar: React.FunctionComponent<IAppBarProps> = () => {
  const classes = useStyles();
  const theme = useTheme();
  const trigger = useScrollTrigger({ disableHysteresis: true, threshold: 0 });

  return (
    <MuiAppBar
      position="sticky"
      color="default"
      className={classes.appBar}
      elevation={trigger ? 4 : 0}
    >
      <Toolbar>
        <Grid item xs>
          <FiretableLogo />
        </Grid>

        <Grid item>
          <Button
            component={Link}
            to={routes.signOut}
            color="primary"
            variant="outlined"
          >
            Sign Out
          </Button>
        </Grid>
      </Toolbar>
    </MuiAppBar>
  );
}

LinkMenuItem = ({ item }: { item: LinkMenuItemType }) => {
	return (
		<div className="link_menu__item">
			<Link to={item.url}>
				{item.title}
				<ForwardIcon />
			</Link>
		</div>
	);
}

NavLink = (props: { item: MenuItem }) => {
  let item = props.item;
  // Based on https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/NavLink.js
  return (
    <Route
      path={item.path}
      exact={item.exact}
      children={props => {
        const cls = props.match ? 'active' : '';
        return (
          <li
            className={['nav-item', cls].filter(x => x).join(' ')}
            title={item.label}
            data-toggle="tooltip"
            data-placement="right"
          >
            <Link to={item.path} className="nav-link">
              <div style={{ margin: '0 10px 0 20px' }}>{item.icon}</div>
              <span className="nav-link-text">{item.label}</span>
              <img className="svg-additional" src={item.additionalIcon} />
            </Link>
          </li>
        );
      }}
    />
  );
}

NavItem = ({ route, title, icon, path, closeHandler }: INavItemProps) => {
  const active = onActiveRoute(path, route);
  const cypressLabel = `${title.toLowerCase()}-navigation-link`;
  return (
    <Link onClick={closeHandler} data-cy={cypressLabel} to={route}>
      <NavLinkContainer activeRoute={active}>
        <Icon
          icon={icon}
          iconSize={20}
          color={active ? COLORS.LIGHT_WHITE : COLORS.LIGHT_GRAY}
          className="nav-icon"
          style={{ marginRight: 14 }}
        />
        <NavTitle activeRoute={active}>{title}</NavTitle>
      </NavLinkContainer>
    </Link>
  );
}

BottomNav: React.FC<IBottomNavProps> = (props) => (
    <div>
        <nav
            className="fixed bottom-0 w-full hidden sm:flex items-center justify-between bg-darkblue-100 h-16 z-30">
            <div className="px-4 flex items-center">
                <Link to="add-node"
                    className="flex items-center text-white hover:text-blue-500 transition mr-8">
                    <FontAwesomeIcon icon="plus-circle" className="mr-2" />
                    <span className="font-semibold text-sm">Add your node</span>
                </Link>
                <a href={props.joinURL}
                    className="flex items-center text-white hover:text-blue-500 transition mr-8"
                    target="_blank">
                    <FontAwesomeIcon icon="code-branch" className="mr-2" />
                    <span className="font-semibold text-sm">Join testnet</span>
                </a>
            </div>
            <div
                className="px-4 flex items-center font-semibold text-sm text-grey-600">
                <a href="https://github.com/Alethio/eth2stats-client/issues"
                    className="mr-8 flex items-center text-grey-600 hover:text-blue-500 transition"
                    target="_blank">
                    <FontAwesomeIcon icon="exclamation-circle" className="mr-2" />
                    <span className="font-semibold text-sm">Report issues</span>
                </a>
                <div className="flex items-center">
                    <span className="mr-2">powered by </span>
                    <a href="https://aleth.io"
                        className="text-grey-600 hover:text-blue-500 transition"
                        target="_blank">Aleth.io</a>
                </div>
            </div>
        </nav>
    </div>
)

StyledLink = styled(Link)`
  text-decoration: none;
  color: ${({ theme }) => theme.colors.text};
  &:focus,
  &:hover,
  &:visited,
  &:link,
  &:active {
    text-decoration: none;
  }
`

Appbar = () => {
  const classes = useStyles();
  const history = useHistory();

  const onLogoClicked = () => {
    history.push("/");
  };

  const onBackClicked = () => {
    history.goBack();
  };

  const isHomePage = () => {
    return history.location.pathname === "/";
  };

  return (
    <AppBar position="sticky" className={classes.appbar}>
      <Toolbar className={classes.toolbar}>
        <Box className={classes.menuLeft}>
          <IconButton edge="start" disabled={isHomePage()} onClick={onBackClicked} className={classes.menuButton} color="inherit" aria-label="menu">
            <ArrowBackIcon />
          </IconButton>
          <img className={classes.menuLogo} src={LogoMenu} onClick={onLogoClicked} alt="DamnVulnerableCryptoApp Logo" />
        </Box>
        <Box display="flex">
          <Link to={"/docs/crypto"} className={classes.docsLink}>Docs</Link>
          <Progress />
        </Box>
      </Toolbar>
      <Loading />
    </AppBar>
  );
}

Home: React.FC = () => {
  return (
    <div id="page-home">
      <div className="content">
        <header>
          <img src={logo} alt="Ecoleta" />
        </header>

        <main>
          <h1>Seu marketplace de coleta de resíduos.</h1>
          <p>
            Ajudamos pessoas a encontrarem pontos de coleta de forma eficiente.
          </p>

          <Link to="/create-point">
            <span>
              <FiLogIn />
            </span>
            <strong>Cadastre um ponto de coleta</strong>
          </Link>
        </main>
      </div>
    </div>
  );
}

function Landing() {
  return (
    <div id="page-landing">
      <div className="content-wrapper">
        <img src={logoImg} alt="Happy" />

        <main>
          <h1>Leve felicidade para o mundo</h1>
          <p>Visite orfanatos e mude o dia de muitas crianças.</p>
        </main>

        <div className="location">
          <strong>Meia Praia</strong>
          <span>Santa Catarina</span>
        </div>

        <Link to="/app" className="enter-app">
          <FiArrowRight size={26} color="rgba(0, 0, 0, 0.6)" />
        </Link>
      </div>
    </div>
  );
}

function Landing() {
  return (
    <div id="page-landing">
      <div className="content-wrapper">
        <img src={logoImg} alt="Happy"/>

        <main>
          <h1>Leve felicidade para o mundo</h1>
          <p>Visite orfanatos e mude o dia de muitas crianças.</p>
        </main>

        <div className="location">
          <strong>Rio do Sul</strong>
          <span>Santa Catarina</span>
        </div>

        <Link to="/app" className="enter-app">
          <FiArrowRight size={26} color="rgba(0, 0, 0, 0.6)" />
        </Link>
      </div>
    </div>
  );
}

Header: React.FC<HeaderProps> = ({ size = 'large' }: HeaderProps) => (
  <Container size={size}>
    <header>
      <img src={Logo} alt="GoFinances" />
      <nav>
        <Link to="/">Listagem</Link>
        <Link to="/import">Importar</Link>
      </nav>
    </header>
  </Container>
)

NotFound = () => (
  <div className="not-found-page-container">
    <TopAppBar prominent>
      <TopAppBarRow>
        <TopAppBarSection>
          <TopAppBarTitle>KeycapLendar</TopAppBarTitle>
        </TopAppBarSection>
      </TopAppBarRow>
    </TopAppBar>
    <div className="message-container">
      <img className="image" src={image} />
      <Typography className="title" tag="h3" use="headline6">
        404: Page not found
      </Typography>
      <Typography className="subtitle" tag="p" use="body1">
        Unknown URL, please return to homepage.
      </Typography>
      <Link to="/">
        <Button label="Go to homepage" />
      </Link>
    </div>
    <Footer />
  </div>
)

render() {
        return (
            <section>
                <Link to={`${this.context.CONTAINER_ROUTE_PREFIX}/add`}>
                    <Button type="primary" style={{marginTop: '12px'}}>新增</Button>
                </Link>
                <F updateTable={this.updateTable} />
                <T updateTable={this.updateTable} tableData={this.state.tableData} {...this.props} />
            </section>
        )
    }

Error404 = (): JSX.Element => {
  useEffect(() => {
    trackPageView('404');
  }, []);

  return (
    <div className="error-page">
      <h1>404</h1>
      <p>Page not found.</p>
      <Link to="/boards">Go to boards</Link>
    </div>
  );
}

Header: React.FC = (): JSX.Element => {
  return (
    <header className="d-flex bg-white padding-bottom-lg">
      <div className="padding-md flex-equal">
        <img src={primaryLogo} alt="logo" className="logo" />
        <div className="margin-top-lg">
          <h1 className="font-weight-400 font-lg family-gothic">
            Get gigs and jobs
          </h1>
          <h2 className="font-weight-400 font-lg family-gothic margin-bottom-md">
            Hire Talent
          </h2>
          <Link
            to={`/${routeNames.signup}`}
            className="btn-primary ripple-primary-dark font-sm">
            Get Started
          </Link>
        </div>
      </div>
      <div className="flex-equal splash-rectangle">
        <img src={rectangle} alt="splash" />
      </div>
    </header>
  );
}

VersionToggle = styled(({ enabled, ...rest }: VersionToggleProps) => <Link {...rest} />)<VersionToggleProps>`
  border-radius: 12px;
  opacity: ${({ enabled }) => (enabled ? 1 : 0.5)};
  cursor: ${({ enabled }) => (enabled ? 'pointer' : 'default')};
  background: ${({ theme }) => theme.bg3};
  color: ${({ theme }) => theme.primary1};
  display: flex;
  width: fit-content;
  margin-left: 0.5rem;
  text-decoration: none;
  :hover {
    text-decoration: none;
  }
`

_getNavigation() {
        const { hasNav } = this.props;
        if (!hasNav) {
            return null;
        }

        return (
            <nav>
                {this._getNavigationLinks()}
                <Link to={Routes.Profile} className="profile-button">
                    <AvatarImage />
                </Link>
            </nav>
        );
    }

Logo: React.FC = () => {
  const { darkMode } = useTheme()
  let logo
  if (window.innerWidth > 450)
    logo = darkMode ? indexLogoFullWhite : indexLogoFullBlack
  else logo = darkMode ? indexLogoWhite : indexLogoBlack

  return (
    <Link to={{pathname: "https://indexcoop.com"}} target={'_top'}>
      <StyledLogo>
        <StyledImage src={logo} alt='index-logo' />
      </StyledLogo>
    </Link>
  )
}

Room: React.SFC<RoomProps> = (props) => {
  const { room_name } = props;
  return <RTCRoom name={room_name}>
    <RoomStateDialogs />
    <div className="container">
      <div className="header">
        <h1>{room_name}</h1>
        <Link to="/"><h2>vorb.chat</h2></Link>
      </div>
      <div className="content">
        <UserList />
        <div className="sidebar">
          <SelfContainer />
          <MessageList />
          <ChatInput />
        </div>
      </div>
      <Footer />
    </div>
  </RTCRoom>;
}

Header: React.FC = () => {
  const [openKeys, setOpenKeys] = useState<string[]>([]);
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
  const sysRoutes = FilterRoutes(routes);
  const history = createBrowserHistory();

  // 路由监听
  useEffect(() => {
    const pathname = history.location.pathname;
    const match = matchRoutes(sysRoutes, pathname);

    if (match?.length) {
      setOpenKeys(match.map((n) => n.route.path));
      setSelectedKeys([match[0].route.path]);
    }
  }, [history.location.pathname]);

  return (
    <Sider>
      <div className={cls.menu_logo}>
        <Typography.Title className={cls.logo_title} level={5}>
          Logo
        </Typography.Title>
      </div>
      <Menu theme="dark" mode="inline" openKeys={openKeys} selectedKeys={selectedKeys}>
        {sysRoutes.map((item) => (
          <Menu.Item key={item.path}>
            <Link to={item.path}>{item.title}</Link>
          </Menu.Item>
        ))}
      </Menu>
    </Sider>
  );
}

ArticleLink = styled(Link)`
  margin-right: 15px;
  color: #333;
  font-size: 13px;
  text-decoration: none;
  
  display: inline-block;
  margin-top: 10px;
`

TeamProjectLink = styled(Link)`
  display: flex;
  font-weight: 700;
  height: 36px;
  overflow: hidden;
  padding: 0;
  position: relative;
  text-decoration: none;
  user-select: none;
`

SearchItemWrapper = styled(Link, { shouldForwardProp: isPropValid })<{
  selected?: boolean
  variant: 'default' | 'textOnly'
  selectedItem: number | null
}>`
  display: flex;
  align-items: center;
  padding: ${({ variant }) => `${sizes(variant === 'default' ? 1 : 2)} ${sizes(4)}`};
  text-decoration: none;

  &:hover {
    ${({ selectedItem }) => selectedItem === null && selectedStyles(true)}
  }

  ${({ selected }) => selected && selectedStyles(!selected)}
`

AppLayout: FC = () => {
  const { pathname } = useLocation();
  const [isSidebarOpen, setIsSidebarOpen] = useToggle(true);
  const { breadcrumbs } = useBreadcrumb();
  const isBreadcrumbHidden = breadcrumbs.length === 0;

  return (
    <Page
      mainContainerId="app-layout-page"
      sidebar={<Sidebar isOpen={isSidebarOpen} />}
      className={styles['app-layout']}
      breadcrumb={
        !isBreadcrumbHidden && (
          <Breadcrumb className={styles['app-layout--breadcrumb']}>
            <BreadcrumbItem>
              <Button variant="link" className="pf-u-p-0" onClick={setIsSidebarOpen.toggle}>
                <BarsIcon />
              </Button>
            </BreadcrumbItem>
            <BreadcrumbItem to="/">One Platform</BreadcrumbItem>
            <BreadcrumbItem>
              {pathname === config.baseURL ? 'API Catalog Home' : <Link to="/">API Catalog</Link>}
            </BreadcrumbItem>
            {breadcrumbs.map(({ label, url }, index) => {
              const isActive = index === breadcrumbs.length - 1;
              return (
                <BreadcrumbItem key={label}>
                  {isActive ? label : <Link to={url}>{label}</Link>}
                </BreadcrumbItem>
              );
            })}
          </Breadcrumb>
        )
      }
    >
      <PageSection
        className={styles['app-layout--content']}
        variant="light"
        padding={{ default: 'noPadding' }}
      >
        <Outlet />
      </PageSection>
    </Page>
  );
}