Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How can I make a button lead to another page via href?

<a href="#" className="btn btn-brand me-2">Get Started</a>

I have this button which I want to link to another page

const Signup = () => {.....}
export default Signup;

This is the function builder and export skeletal code for a component which will be the signup/login page for an app. It’s the one I wish to link to via the button above.

function App() {
  return (
    <div>
      <Navbar />
      <Hero />
      <About />
      <Pricing />
      <Footer />
    </div>
  );
}

Here’s my app.js’ function with the different components of my welcome page. Right now, I want the welcome page to act separate, but a couple of buttons on the welcome page should lead to the signup page.

Thanks!

Tags:

2

Answers


  1. 0

    Install react-router-dom if not installed then go through the below code.

    import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Navbar from './Navbar'; // Adjust paths according to your file structure
import Hero from './Hero';
import About from './About';
import Pricing from './Pricing';
import Footer from './Footer';
import Signup from './Signup'; // Adjust path according to where your Signup component is located

function App() {
  return (
    <Router>
      <div>
        <Navbar />
        <Hero />
        <About />
        <Pricing />
        <footer>
          {/* Your footer content */}
        </footer>
        <Switch>
          <Route exact path="/">
            {/* Content for the welcome page goes here */}
            <button onClick={() => window.location.href="/signup"}>Get Started</button>
          </Route>
          <Route path="/signup">
            <Signup />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;
    Login or Signup to reply.
  2. 0

    react it self is not reliable when it comes to routing
    you need to install react-router-dom the same way you installed react via (npm ,yarn,etc..)

    once you get it installed you need to wrap your App component like this in the index file

    root.render(
  <BrowserRouter>

     <App />

  </BrowserRouter>,
);

    now at you App component you need to define something look like this under you return statement

      <Routes>
    <Route path="/sign-up" element={<Signup />} />
    <Route path="/sign-in" element={<Signin />} />
  </Routes>

    Routes is the wrapper for all the Route you might have

    path is the path after the url,

    element is pointing to the component you want to render at this path

    lets assume you have button lead to /any-path
    you would import Link Component from react-router-dom

    then use it like this

    <Link to="/sign-up">Signup</Link>

    Link is woking as <a href=""></a>

    Right now you should try to localhost:port/sign-up, Signup Component should be displayed if it has jsx returned like any regular component

    i would recommend React-router-dom Article it would help after then

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search