why isn't link working when I use it with components-CodePudding

I am trying use link to make a link for each page section in the header to go to that specific page when it is clicked, the problem is that it isn't working when I put the link portion in the headers and pages.

in App.js

import { BrowserRouter } from "react-router-dom";
import { HashLink as Link } from "react-router-hash-link";
import Header from "./pages/Header";
import About from "./pages/About";
import Resume from "./pages/Resume";
import Projects from "./pages/projects";
import Contact from "./pages/Contact";
import Card from "./card/card";

function App() {
  return (
    <BrowserRouter>
      <Header />
      <About />
      <Resume />
      <Card
        img={require("./img/resume.png")}
        title="Resume"
        description=""
        button="download"
        button2 = "view"
      />
      <Projects />
      <Contact/>
    </BrowserRouter>
  );
}

in Header.js

import React from "react";
import { Link } from "react-router-dom";
import { BrowserRouter } from "react-router-dom";


export default class Header extends React.Component {
  render() {
    return (
      <body >
        <div className="App" >
          <div >
            <h1 >***</h1>
            <h2 >
             ****
            </h2>
          </div>
          <div >
            <div >
              <h1 >Links:</h1>
              <div >
                <h2>Github</h2>
                <h2>LinkedIn</h2>
                <h2>Behanced</h2>
              </div>
            </div>
            <div>
              <Link to="#contact">
                <h1 >
                  Contact:
                </h1>
              </Link>
              <div >
                <h2> ****** </h2>
                <h2 > *** </h2>
              </div>
            </div>
            <div>
              <Link to="#about">
                <h1 >
                  About Me
                </h1>
              </Link>
            </div>
            <div>
              <Link to="#resume">
                <h1 >
                  Resume
                </h1>
              </Link>
            </div>
            <div>
              <Link to="#projects">
                <h1 >
                  Projects:
                </h1>
              </Link>
              <div >
                <h2>Link-Tree Style Website</h2>
                <h2>Calulator</h2>
                <h2>Static Portfolio Website</h2>
              </div>
            </div>
          </div>
        </div>
      </body>
    );
  }
}

In Contact.js

import React from "react";
import { Link } from "react-router-dom";
import { BrowserRouter } from "react-router-dom";
export default function Contact() {
  return (
    <section id="contact">
      <body >
        <div className="App" >
          <h1 > Contact </h1>
          <div>
            <p ></p>
          </div>
        </div>
      </body>
    </section>
  );
}

I tried adding the link portion the app.js portion of my code but that didn't work either and I tried adding Link and BrowserRouter from react-router-dom. I only tried with the contact portion.

CodePudding user response：

as i check your question you want to move particular section of next page using link. Try with this code-

<Link to={{ pathname: "/PATH_NAME", hash: "#first" }></Link>

In the above code hash is your div id.. Please try this code, if it doesn't work just lemme know, i will help you. Thanks

CodePudding user response：

In your App.js try to use it like this,

<BrowserRouter>
      <Routes>
        <Route path="/cart" element={<Gotocart/>}/>

        <Route  path='/' element={</About>}></Route>

        <Route  path='/contact' element={<Contact/>}></Route>
       .
       .
       .
       .

        </Routes>
</BrowserRouter>

And for the section not related to Link you can put them just after the BrowserRouter tag.

Link this,

 <BrowserRouter>
          <Header> // with no related link tag
          <Routes>
            <Route path="/about" element={<About/>} />
          </Routes>
 </BrowserRouter>

You should also change <Link to="#contact"> to <Link to="/contact">