How to use react-router Link components in react

Question

I want to use link in my react app.But when I click on the link , in the url it displays it correctly as http://localhost:3000/https://google.com but it doesn't redirect to google. I imported link as below import { Link, Route, BrowserRouter as Router } from 'react-router-dom';

My code is as below

import React from 'react';
import Container from '@material-ui/core/Container';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Hsa from './Assets/hsa.png';
import Healthnet from './Assets/healthnet.png';
import { Link, Route,  BrowserRouter as Router  } from 'react-router-dom';

export const useStyles = makeStyles((theme) => ({
  image:{
    height:'40px',
    width:'40px'
  },
  item1: {
    order: 1,
    [theme.breakpoints.down('sm')]: {
      order: 2,
    },
    [theme.breakpoints.down('xs')]: {
      order: 1,
    },
  },
  item2: {
    order: 2,
    [theme.breakpoints.down('sm')]: {
      order: 1,
    },
    [theme.breakpoints.down('xs')]: {
      order: 2,
    },
  },
}));

export default function App() {
  const dataSource = [
    {
      name: 'HSA Bank',
      cardTitle: 'Medical FSA Plan',
      title: 'General Purpose Flexible Spending Accounts(FSA)',
      cdes1: 'Annual Max Contribution',
      cdes2: 'Use it or Lose it policy (Grace period)',
      des1:
        "A Flexible Spending Account can be used to pay for qualified out-of-pocket health care costs. Because money you contribute to your FSA isn't taxed, you can reduce your overall healthcare expenses. Typically, you must use all money in an FSA within your employer's plan year (known ass 'use it or lose it'). Some employers offer a 2.5 month grace period or allow you to rollover up to $500.",
      des2: 'The 2020 IRS contribution limit is $2,750.',
      image: Hsa,
    },
    {
      name: 'Health Net',
      cardTitle: 'Dependent Care FSA Plan',
      title: 'Dependent care FSA(DCFSA)',
      cdes1: 'Max individual Contributor for Married but filling as seperately',
      cdes2: 'Max Married Contribution for Filling Joinly or Single Parent As Head',
      cdes3: 'Use it or Lose it policy (Grace period)',
      des1:
        'A Dependent Care Flexible Spending Account is a pre-tax benefit account used to pay for eligible dependent care services such as preschool, summer day camp, before/after school programs, and child or elder care.',
      des2:'2020 IRS contribution limit: $2,500 if married and filing seperately; $5,000 if married and filing jointly or filing as a single/head of household.',
      des3:
        'DCFSA annual contribution limits always align with the calender year (which may or may not align with your plan year). NOTE: when filing jointly, the IRS requires both spouses have W-2 earned income during the year',
      image: Healthnet,
    },
  ];

  const classes = useStyles();

  const description = dataSource.map((item) => {
    return (
      <Grid container spacing={3} style={{ backgroundColor: 'ash', paddingBottom: 100 }}>
        <Grid container direction="column" xs={12} sm={6} md={4} className={classes.item1}>
          <div>
            <Card>
              <div>
                <CardContent>
                <img src= {item.image} className={classes.image} alt="pic" />
                  <p style={{fontSize:10}}>{item.name}</p>
                  <h3>{item.cardTitle}</h3>
                </CardContent>
              </div>
              <div style={{ backgroundColor: '#f4f8fb' }}>
                <CardContent>
                  <p>{item.cdes1}</p>
                  <p>{item.cdes2}</p>
                  <p>{item.cdes3}</p>
                </CardContent>
              </div>

            </Card>
          </div>
        </Grid>
        <Grid container direction="column" xs={12} sm={6} md={8} className={classes.item2}>
          <div style={{ paddingLeft: 50 }}>
            <h1>{item.title}</h1>
            <p>{item.des1}</p>
            <p>{item.des2}</p>
            <p>{item.des3}</p>
            <Router>
              <Route>
                <Link to='https://google.com' style={{color:'lightblue'}}>View Plan Summary</Link>
              </Route>
            </Router>
          </div>

          
        </Grid>
      </Grid>
    );
  });

  return (
    <React.Fragment>
      <Container maxWidth="lg" style={{ paddingTop: 50, backgroundColor: '#f3f4f5' }}>
        {description}
      </Container>
    </React.Fragment>
  );
}

Answer 1

Link is only to be used to navigate inside your app since it's part of the react-router-dom.

From the docs:

Link provides declarative, accessible navigation around your application. It offers the possibility to pass also an object to the to-declaration or a function to which current location is passed as an argument and which should return location representation as a string or as an object.

For an external link you should use the regular <a>-tag as shown below.

Change <Link to='https://google.com' style={{color:'lightblue'}}>View Plan Summary</Link> to <a href='https://google.com' style={{color:'lightblue'}}>View Plan Summary</a>