如何在 React js 中从一个 HTML 页面路由到另一个 HTML 页面？

Question

I am new to javascript and react, and i am trying to route from one component to another when a button is clicked.

example of html code in the sign up page:

 <!-- signup button -->
      <div id = "signup">
        <button class="signupbutton">Sign up</button>
      </div>

so when the sign up button i want it to route to this html page:

 <!-- page title -->
      <h1><strong>Let's get started! First up, where are you in the planning process?</strong</h1>

Any ideas on how i can do this? - i know i need to do this in javascript and with react (i ahve created a JS file for the sign up page and planning process page), but i am a bit unsure of how to do so. Any ideas?

Answer 1

You can't link in HTML directly with React. You need to set up two components first.

One for the page with the Button:

    export default function ButtonPage () {
    return (
            <div id = "signup">
                <button className="signupbutton">Sign up</button>
            </div>
        );
    }

One with the page for the Get Started Page:

    export default function GetStarted () {
    return (
            <h1><strong>Let's get started! First up, where are you in the planning process?</strong</h1>
        );
    }

Then You need to set up your main component, the App component and link the child components you want to display. If you use the latest version of React you need to import BrowserRouter , Route and Routes from react-router-dom :

    import { BrowserRouter, Route, Routes } from "react-router-dom";

    export default function App () {
    return (
            <BrowserRouter>
                <Routes>
                    <Route path="/signup" element={<ButtonPage/>}></Route>
                    <Route path="/getstarted" element={<GetStarted/>}></Route>
                </Routes>
            </BrowserRouter>
        );
    }

Then you need to import Link from react-router-dom inside your ButtonPage Component and Link to the other Component:

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

    export default function ButtonPage () {
    return (
            <div id = "signup">
                <Link to="/getstarted">
                    <button className="signupbutton">Sign up</button>
                </Link>
            </div>
        );
    }

Et voilà: You linked two pages in React. For more information, look up the documentation of React-Router here .