How do I make a Link(href) from one component to the other using Hooks, passing from Navbar to my component?

Question

I would like to pass down a link to a component that is going to be rendered on the same page. I have a Navbar that has links and I want to set the href to '.Container-One' that's referenced in another component. How should I do this if I'm using React Hooks functional components?

Here is my Navbar.js

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles(theme => ({
  root: {
      flexGrow: 1
  },
  menuButton: {
      marginRight: theme.spacing(2)
  },
  title: {
      flexGrow: 1
  }
  }));

export default function ButtonAppBar() {
  const classes = useStyles();

  return (
      <div className={classes.root}>
      <AppBar style={{ backgroundColor: "#343567" }} position="static">
          <Toolbar>
          <Typography variant="h6" className={classes.title}>
              Welcome
          </Typography>
          <Button
              onClick={e => e.preventDefault()}
              href={".Container-One"}
              color="inherit"
          >
              About
          </Button>
          <Button color="inherit">Experience</Button>
          <Button color="inherit">Contact</Button>
          </Toolbar>
      </AppBar>
      </div>
  );
}

Here is my component that I would like it to be linked too.

import React from "react";
import CssBaseline from "@material-ui/core/CssBaseline";
import Typography from "@material-ui/core/Typography";
import Container from "@material-ui/core/Container";
import styles from "./aboutme.module.css";
import myPhoto from "../../images/me.jpg";
import TrendingUpIcon from "@material-ui/icons/TrendingUp";

function AboutMe() {
  return (
    <div>
      <Container className={styles["Container-One"]}>
          <Typography className={styles["Content-One"]} component="div">
          <h3 className={styles["Container-One-Heading"]}>
              Hello! I'm lorem ipsum. Dont know me? Check me out at call lorem- 
              ipsum
          </h3>
          </Typography>
      </Container>
    </div>
  );
}

export default AboutMe;

An example of this might be in simple HTML you would pass a button with href to a container or another HTML class or id on the same page.

For example:

<button href="#Container-Three"}>container-three section</button>

I would like to do this in react, but I'm using different components.

graysonmcm · Answer 1 · 2020-03-17T06:01:17.343

I was able to answer this one myself. I found that if I set the props in the component that is rendering both of the components. First, the component aka. Navbar that has the links. Second, the component that is being displayed within the same component. That confused you, no worries here is an example.

EX:

So for the example shown above, this is Navbar.js.

return (
 <div className={classes.root}>
  <AppBar style={{ backgroundColor: "#343567" }} position="static">
    <Toolbar>
      <Typography variant="h6" className={classes.title}>
        Welcome
      </Typography>
      <Button href={props.hreftwo} color="inherit"> //Here I passed props- 
        //accessible from the parent prop
        About
      </Button>
      <Button href={props.hrefthree} color="inherit">
        Experience
      </Button>
      <Button color="inherit">Contact</Button>
    </Toolbar>
  </AppBar>
 </div>
);

This is the parent prop Home.js.

Ex:

import React from "react";
import AboutMe from "../components/AboutMe";
import Navbar from "../components/Navbar";

function Home() {
return (
    <div>
    //Below I am passing the hrefs relative to the containers that are shown 
    // in <AboutMe /> section
    <Navbar hreftwo="#Container-Two" hrefthree="#Container-Three" />
    <AboutMe />
    </div>
);
}

export default Home;

That's how I was able to access the id's of one component and then add links that go to that component in my Navbar.

There is also a great solution this issue here, StackOverflow React-Scroll

How do I make a Link(href) from one component to the other using Hooks, passing from Navbar to my component?

1 Answers1