@reach/router#Link TypeScript Examples

The following examples show how to use @reach/router#Link. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Header.tsx    From office-booker with MIT License 6 votes vote down vote up 
AdminHeader: React.FC<Props> = ({ currentRoute }) => (
  <AdminHeaderStyles>
    <h2>Admin</h2>

    <div className="btns">
      <Link to="/admin" className={currentRoute === 'bookings' ? 'current' : ''}>
        Bookings
      </Link>
      <Link to="/admin/stats" className={currentRoute === 'stats' ? 'current' : ''}>
        Stats
      </Link>
      <Link to="/admin/users" className={currentRoute === 'users' ? 'current' : ''}>
        Users
      </Link>
    </div>
  </AdminHeaderStyles>
)
Example #2
Source File: Header.tsx    From listo with MIT License 6 votes vote down vote up 
Header = () => {
  const classes = useStyles({});
  return (
    <React.Fragment>
      <CssBaseline />
      <AppBar position="absolute" color="default" className={classes.appBar}>
        <Toolbar>
          <Link to="/" className={classes.logo}>
            <Logo />
          </Link>
          <Link to="/faq" className={classes.logo}>
            <Typography
              variant="h6"
              color="inherit"
              noWrap
              className={classes.menuItem}
            >
              FAQ
            </Typography>
          </Link>
          <Link to="/checklists" className={classes.logo}>
            <Typography
              variant="h6"
              color="inherit"
              noWrap
              className={classes.menuItem}
            >
              CHECKLISTS
            </Typography>
          </Link>
        </Toolbar>
      </AppBar>
    </React.Fragment>
  );
}
Example #3
Source File: Home.tsx    From viewer with MIT License 5 votes vote down vote up 
Home = () => {
  const navigate = useNavigate();
  const [learnLinks, setLearnLinks] = useState<LearnLink[]>([]);
  const [linkClass, setLinkClass] = useState<string>();
  const userSettings = useContext(SettingsContext);
  const connectivityStatus = useConnectivity();

  useEffect(() => {
    void fetch("./links.json").then((response) => {
      if (response.status >= 200 && response.status < 300) {
        void response.json().then((links) => {
          setLearnLinks(links);
        });
      }
    });
  }, []);

  useEffect(() => {
    setLinkClass(
      connectivityStatus === InternetConnectivityStatus.Offline
        ? "disabled-link"
        : ""
    );
  }, [connectivityStatus]);

  const openFile = async () => {
    const filePath = await ITwinViewerApp.getFile();
    if (filePath) {
      void userSettings.addRecent(filePath);
      void navigate("/viewer", { state: { filePath } });
    }
  };

  return (
    <div>
      <Headline className="home-title">iTwin Viewer for Desktop</Headline>
      <div className="home">
        <div className="home-section start">
          <Title> {ITwinViewerApp.translate("home.start")}</Title>
          <nav>
            <div>
              <SvgFolderOpened />
              <span onClick={openFile}>{ITwinViewerApp.translate("open")}</span>
            </div>
            <div>
              <SvgImodel className={linkClass} />
              <Link to="itwins" className={linkClass}>
                {ITwinViewerApp.translate("download")}
              </Link>
            </div>
          </nav>
        </div>
        <div className="home-section learn">
          <Title> {ITwinViewerApp.translate("home.learn")}</Title>
          {learnLinks.map((link) => {
            return (
              <Blockquote key={link.url}>
                <a
                  href={link.url}
                  target="_blank"
                  rel="noreferrer"
                  className={linkClass}
                >
                  {ITwinViewerApp.translate(link.textKey)}
                </a>
              </Blockquote>
            );
          })}
        </div>
        <div className="home-section recent">
          <Title>{ITwinViewerApp.translate("home.openRecent")}</Title>
          <Recents />
        </div>
      </div>
    </div>
  );
}