Having trouble with react Link tag

Question

I tried nesting a <button> tag into a <Link> tag with the link routing to another page, but when I click the button, nothing happens. This is for a pricing card, and the code is in pricecard.js

App.js:

import logo from './logo.svg';
import './App.css';
import donenoti from './donenoti.js';
import errornoti from './errornoti.js';
import infonoti from './infonoti.js';
import pricingCard from './pricecard.js'
import personCard from './personcard.js'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p className="titleText">mushyUI</p>
        <img src={logo} className="App-logo" alt="logo" />
        <h1 className="header">
          Open-Source UI Elements for everyone!
        </h1>
        <p>Github -- <a href="https://github.com/MushyToast/ui">Github</a></p>
        {donenoti("title", "description")}
        {errornoti("title", "description")}
        {infonoti("title", "description")}
        {pricingCard("professional edition", "$19.99", "It is very much professional", "month", "https://www.youtube.com/watch?v=dQw4w9WgXcQ", "https://www.youtube.com/watch?v=dQw4w9WgXcQ")}
        {personCard("Quandale Dingle", "I am a person", "https://mushytoast.tech/assets/imgs/goofycapybara.png")}
      </header>
    </div>
  );
}

export default App;

pricecard.js:

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

function pricingCard(title, price, description, timeunit, buylink, learnmorelink) {
  return (
    <div className="pricingcard">
      <h2 className="priceTitle">
        {title}
      </h2>
      <h1 className="price">
        {price}
        <p className="priceTimeUnit">
          /{timeunit}
        </p>
      </h1>
      <p className="priceDescription">
        {description}
      </p>
            
      <span className="priceCardButtons">
        <a href={buylink}> {/*change to your own link */}
          <button className="priceButton">
            Buy Now
          </button>
        </a>
        <Link to='./otherpage'>
          <button className="learnMoreButton">
            Learn More
          </button>
        </Link>
      </span>
    </div>
  )
}

export default pricingCard;

otherpage.js:

import React from 'react';
import { BrowserRouter } from 'react-router-dom';

export default function OtherPage() {
  return (
    <div>
      <h1>Other Page</h1>
    </div>
  );
}

root = document.getElementById('root');
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  root
);

index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom'
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

reportWebVitals();

I tried adding a rendering tag in the otherpage.js, but that made no difference, and I tried adding a .js to the otherPage in the Link to=''

Answer 1

The code isn't rendering a Route to link or navigate to. The code is also incorrectly using regular Javascript functions to render content instead of React functions so they are incorporated as part of the normal React component lifecycle.

Render routes to render specific content matched by the URL

The OtherPage component should be rendered on a Route in the App component instead of directly trying to inject itself into the DOM. Move the header content also into its own route on "/".

import { Routes, Route } from 'react-router-do';
import OtherPage from '../path/to/OtherPage';

...

function App() {
  return (
    <div className="App">
      <Routes>
        <Route
          path="/"
          element={(
            <header className="App-header">
              ...
            </header>
          )}
        />
        <Route path="/otherpage" element={<OtherPage />} />
        { /*... other routes ... */ }
      </Routes>
    </div>
  );
}

Convert donenoti, errornoti, infonoti, etc to React components

Convert these Javascript functions to React function components. Keep in mind that React components are Capitalized.

Example:

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

function PricingCard({
  title,
  price,
  description,
  timeunit,
  buylink,
  learnmorelink
}) {
  return (
    <div className="pricingcard">
      <h2 className="priceTitle">{title}</h2>
      <h1 className="price">
        {price}
        <p className="priceTimeUnit">/{timeunit}</p>
      </h1>
      <p className="priceDescription">
        {description}
      </p>
            
      <span className="priceCardButtons">
        <a href={buylink}> {/*change to your own link */}
          <button type="button" className="priceButton">
            Buy Now
          </button>
        </a>
        <Link to="/otherpage">
          <button type="button" className="learnMoreButton">
            Learn More
          </button>
        </Link>
      </span>
    </div>
  )
}

export default PricingCard;

...
import Donenoti from './Donenoti';
import Errornoti from './Errornoti';
import Infonoti from './Infonoti';
import PricingCard from './Pricecard';
import PersonCard from './Personcard';

function App() {
  return (
    <div className="App">
      <Routes>
        <Route
          path="/"
          element={(
            <header className="App-header">
              <p className="titleText">mushyUI</p>
              <img src={logo} className="App-logo" alt="logo" />
              <h1 className="header">
                Open-Source UI Elements for everyone!
              </h1>
              <p>
                Github -- 
                <a href="https://github.com/MushyToast/ui">Github</a>
              </p>
              <Donenoti title="title" description="description" />
              <Errornoti title="title" description="description" />
              <Infonoti title="title" description="description" />
              <PricingCard
                title="professional edition"
                price="$19.99"
                description="It is very much professional"
                timeunit="month"
                buylink="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
                learnmorelink="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
              />
              <PersonCard
                title="Quandale Dingle"
                description="I am a person"
          link="https://mushytoast.tech/assets/imgs/goofycapybara.png"
              />
            </header>
          )}
        />
        ...
      </Routes>
    </div>
  );
}